vueiconfontvuetify
URL: 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 更清晰一点😁
