vue iconfont vuetify
登录 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 更清晰一点😁
