扩展图标库

下载安装图标

• 从 https://www.iconfont.cn (opens new window) 网站上生成图标库css文件

注意看上图的命名格式

FontClass前缀：vk-xxx-icon-

Font Family：vk-xxx-icon

你只改动xxx，如

FontClass前缀：vk-aaa-icon-

Font Family：vk-aaa-icon

• 下载至本地

• 3、解压下载的文件，并复制 iconfont.css 文件到 你项目根目录的 static 目录，并将 iconfont.css 改名为 vk-custom-icon.css

• 4、在 App.vue 内引入图标

<style lang="scss">
@import "@/static/vk-custom-icon.css";
</style>

• 5、假设你的某个图标是 vk-custom-icon-update

则 vk-custom-icon-update 就是图标的 name，也是图标的值

使用示例

显示图标

<text class="vk-custom-icon vk-custom-icon-update" style=" font-size: 16px;color: #000000;"></text>

如果你使用了 vk-uview-ui 组件库，则可以这样显示图标

<u-icon name="vk-custom-icon-update" size="16" color="#000000"></u-icon>

传送门 - admin端扩展图标教程 (opens new window)