1.在使用的vue页面引入图标组件
<script lang="ts" setup>
import {Icon} from '@/components/Icon';
</script>
2.在具体位置使用
<template>
<Icon icon="svgfont-icon7" class="iconbtn" :size="18" color="#ed6f6f"></Icon>
</template>
3.使用选择icon组件
import { IconPicker ,Icon} from '@/components/Icon';
在使用位置的组件,返回图标名称
<IconPicker @change="(icon)=>{formData.icon=icon}"></IconPicker>
4.使用 Arco Design 内置的图标
直接去 arco官网图标组件 找到相应的图标名称
5.使用阿里图标
阿里iconfont 搭建自己图标库,新建项目需要注意如下:
(1)配置 FontClass/Symbol 前缀为:svgfont-
(2)配置 Font Family 为 iconfont
(3)将生成好的图标复制.js文件放到项目index.html文件<head>中
<script type="text/javascript" src="//at.alicdn.com/t/c/font_3931542_7lkjlll5u8q.js"></script>
6.参数说明
参数名 | 描述 | 类型 | 默认值 | 其他 |
icon | 图标名称 | string | -- | |
size | 大小 | number | 18 | |
spin | 是否旋转 | bool | false | |
color | 颜色 | string | ||
prefix | 前缀 | string |