特别说明

1.2.27提供 请按照教程使用自定义图标。
我默认的图标集为iconfont,前缀为icon-。所以你的名称不要和我相同。

🎉目录导航

• 通过iconfont挑选图标

通过iconfont挑选图标

阿里巴巴图标库，你可以自己制作图标上传，也可以挑选别人的。
1、登录注册
2、搜索和挑选你想要的图标，添加至购物车。
3、点击顶部购物车图标
4、在弹出的页面中，底部选择添加至项目，新建一个项目名。把挑选的图标加入到项目中。
5、在项目中如下图标设置（如果需要彩色图标就勾选）

6、设置好后，点击保存。
7、点击下载至本地，打开压缩包，找到iconfont.css就是你的图标文件啦。把你的图标文件放到你的自己目录中去
8、然后在app.vue中放入iconfont.css代码，或者使用引入方式，引用这个iconfont.css文件。
9、开始使用图标，比如示例中的我可以像下面这样使用

<tm-icons name="myicon-camera"></tm-icons>

警告

引用任何图标库，请务必在app.vue中引入为全局使用。图标的前缀一定要相同。
如上述示例图标库为myicon myicon-名称。如Awesome图标，fa fa-名称。mdi图标为mdi mdi-名称。

正确的在app.vue中引入拓展图标库
引入下方的图标库将会增大小程序包的大小，请谨慎引入
打开app.vue在style标签内如下：

/** 引入fontAwesome图标 **/
@import './tm-vuetify/scss/fonts/fontawesome_base64.css';
/** 引入mdi图标 **/
@import './tm-vuetify/scss/fonts/mdi_base64.css';

如果需要使用全套的mdi图标，那么你需要引入tm-vuetify/scss/fonts/mdi_base64.css。
如果需要使用全套的font awesome图标，那么你需要引入tm-vuetify/scss/fonts/fontawesome_base64.css。
使用如下：

<tm-icons name="mdi-account-circle"></tm-icons>

//如果我想使用 Font Awesome图标，也简单，你只需要引入相对应的图标库即可使用。如下：
<tm-icons name="fa-address-card"></tm-icons>

tmzdy 于 2022/12/7 编辑 报错？ | 评论？