admin-element-vuevite.ts

# IconFont

组件位置：@/components/IconFont (opens new window)。

创建原因：方便统一管理使用 iconfont.cn 上 js 资源图标 。

在线DOME (opens new window)

# 使用方法

# 1、iconfont.cn 上生成 js 资源。

登录 iconfont.cn 创建项目，添加需要的图标，生成js资源。

# 2、配置js资源

@/config/settings.ts 文件中 iconfontUrl参数， 配置 iconfont.cn 生成的js文件地址。

const settings: SettingsType = {
  iconfontUrl: [
    '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
    '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', 
  ],
};

export default settings;
1
2
3
4
5
6
7
8

# 3、使用Demo：

<template>
    <IconFont type="iconfont图标名称" class="" style=""/>
</template>
<script lang="ts">
import IconFont from '@/components/IconFont';
import { defineComponent } from "vue";
export default defineComponent({
    components: {
        IconFont
    }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12

← useEcharts →