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

一、Arco disign vue 内置的图标库

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

解决：新建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为动态的图标名称，比如图标为<icon-check-circle-fill />，则值就是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