Vue 项目使用 iconfont

vue iconfont vuetify

URL: https://www.iconfont.cn/

登录 GitHub 用户

选择自己需要的图标, 添加到购物车, 然后添加图标到项目

Download Code

图标选择好后, 点击 Download Code 下载图标文件, 本地解压后效果如下

在项目中引用

把 iconfont.js 添加到项目指定位置, 如: src/icon/iconfont.js

main.js 中引入 iconfont 文件

import './icon/iconfont.js'

App.vue style 中添加图标样式

font-size: 2em; 是自定义的

<style>
.icon {
  width: 1em; height: 1em;
  font-size: 2em; 
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

vue 文件中使用, 如下

<template>
<div>
<svg class="icon" aria-hidden="true">
  <use xlink:href="#iconshouyeshouye"></use>
</svg>
</div>
</template>

替换 vuetify 默认图标样式, 如下

<template>
  <div class="main">
    <v-bottom-navigation :value="navData.activeBtn" fixed grow color="primary">
      <v-btn @click="bottomClick('/home')">
        <span>首页</span>
        <!-- <v-icon>mdi-home-outline</v-icon> -->
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconshouyeshouye"></use>
        </svg>
      </v-btn>

      <v-btn @click="bottomClick('/personal')">
        <span>我的</span>
        <v-icon>mdi-account-outline</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </div>
</template>

调整后的效果如下图

没有对比就没有伤害, Iconfont 图标看起来要比原来的 Material Icons 更清晰一点😁