arco disign 图标库-如何动态渲染图标 + iconPark图标库的使用

一、Arco disign vue 内置的图标库

Arco的图标是标签式的，如：，它并没有提供字符串指定图标的方式
如果我们以字符串的形式，动态生成图标，这种形式很不理想。

解决：新建FunctionalIcons.vue组件

<script>import { h, resolveDynamicComponent } from 'vue';function Icon(props, ctx) {const Component = resolveDynamicComponent(`icon-${props.icon}`); //icon图标//const Component = resolveDynamicComponent(`${props.icon}`);return h(Component);}export default Icon;
</script>

使用：
Icon为动态的图标名称，比如图标为，则值就是check-circle-fill

  import FunctionalIcons from '@/components/Icon/FunctionalIcons.vue';<functional-icons:icon="item.style.icon"size="30"></functional-icons>

二、icon-Park图标库

icon-Park是字节跳动的图标库：icon-park官网：https://iconpark.oceanengine.com/official

以vue3为例：
环境搭建：

1. 终端导入：npm install @icon-park/vue-next –save
2. main.ts 导入icon-park的css：
   import '@icon-park/vue-next/styles/index.css';

图标使用：

<aiming theme="outline" size="24" fill="#333"/>
import { aiming } from '@icon-park/vue-next';

上面的例子是标签式的图标，也可以通过字符串定义图标：

 import { IconPark } from '@icon-park/vue-next/es/all';
<IconPark :type="item.style.icon" theme="filled" />

icon-park参考：https://zhuanlan.zhihu.com/p/260585097

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！