本文主要是介绍GoFly企业版里的阿里图标如何增加自定义图标到后台,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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 |
这篇关于GoFly企业版里的阿里图标如何增加自定义图标到后台的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!