arco design icon library - how to dynamically render icons + use of iconPark icon library

1. Arco design vue's built-in icon library

Arco's icon is tabbed, such as: <icon-check-circle-fill />, it does not provide a string to specify the icon
If we dynamically generate icons in the form of strings, this form is not ideal.

Solution: newFunctionalIcons.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>

Use:
Icon is a dynamic icon name, for example, if the icon is <icon-check-circle-fill />, then the value ischeck-circle-fill

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

2. icon-Park icon library

icon-Park is the icon library of ByteDance: icon-park official website: https://iconpark.oceanengine.com/official

Take vue3 as an example:
environment construction:

1. Terminal import:npm install @icon-park/vue-next –save
2. main.ts imports icon-park css:
   import '@icon-park/vue-next/styles/index.css';

Icon usage:

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

The above example is a tabbed icon, and the icon can also be defined by a string:

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

icon-park reference: https://zhuanlan.zhihu.com/p/260585097