arco disign 图标库-如何动态渲染图标 + iconPark图标库的使用
迪丽瓦拉
2024-05-27 14:42:07
0次
一、Arco disign vue 内置的图标库
Arco的图标是标签式的，如：
如果我们以字符串的形式，动态生成图标，这种形式很不理想。
解决：新建FunctionalIcons.vue组件
使用：
Icon为动态的图标名称，比如图标为check-circle-fill
import FunctionalIcons from '@/components/Icon/FunctionalIcons.vue';
二、icon-Park图标库
icon-Park是字节跳动的图标库：icon-park官网：https://iconpark.oceanengine.com/official
以vue3为例：
环境搭建：
- 终端导入：
npm install @icon-park/vue-next –save - main.ts 导入icon-park的css：
import '@icon-park/vue-next/styles/index.css';
图标使用：
上面的例子是标签式的图标，也可以通过字符串定义图标：
import { IconPark } from '@icon-park/vue-next/es/all';
icon-park参考：https://zhuanlan.zhihu.com/p/260585097
下一篇：基频估计算法简介