Vue中Icon图标的使用

在开发项目中，我们经常要用到图标，我们常用到的有iconfont,iconPark,iconify等, iconfont字体虽然多但是整体图标大小不统一，类型不统一，而且有侵权的可能，所以我推荐使用iconPark和iconify作为基础,iconfont作为补充。

Element Plus使用Icon的方式

1. 安装图标库

npm install @element-plus/icons-vue

2. 使用图标 使用图标有2种方式，

• 第一种方式通过图标组件的方式。 ElementPlus 的图标库由之前的 Icon Font 迁移了 SVG Icon，使用方式大不一样，我们只需要将所用到的图标引入后再将图标名作为一个 Vue 组件使用即可，如下：

<template>
  <Expand />
  <Fold />
</template>

<script>
import { Expand, Fold } from '@element-plus/icons-vue';
components: {
    Expand,
    Fold
  },
</script>


全局注册组件,页面中直接使用，无需再导入组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

另外，ElementPlus 还为我们提供了 ElIcon 组件，用于修改图标样式，我们只需要将图标组件通过插槽的形式传入进去， 然后通过该组件的 color 及 size 属性去修改图标的颜色和大小，当然， 如果有特殊需求你也可以使用 class 属性和 style 属性去定义图标样式，但一般我们只会去修改颜色和大小就够了，如下：

<template>
  <el-icon color="#000" size="22px">
    <Expand />
  </el-icon>

  <el-icon style="color: #000; font-size: 22px;">
    <Fold />
  </el-icon>
</template>

<script setup>
import { Expand, Fold } from '@element-plus/icons-vue';
</script>

可以看到，ElementPlus 中将 SVG 图标单独抽离了出来，对于加载一个 Icon，我们不需要关注修改它的样式， 只是引入加载就好了，然后再由一个统一的组件去修改样式。

• 第二种方式 通过图标名称的方式,Vue2中的使用方式

<el-icon><component is="el-icon-delete"></component></el-icon>

动态加载的话使用：
<component :is="menu.icon"></component>
menu.icon为data中的属性

iconPark图标的使用

1. 安装

在Vue3中使用
npm install @icon-park/vue-next --save

2. Vue页面中直接使用

<icon-park type="add-text" theme="filled"/>


import {IconPark} from '@icon-park/vue-next/es/all';
components: {
   IconPark
},

iconify图标的使用

1. 安装

npm install --save-dev @iconify/vue

2. 导入

import { Icon } from '@iconify/vue';
export default {
	components: {
		Icon,
	},
});

3. 使用

<Icon icon="ic:baseline-5k" />
可以使用el-icon进行包裹
<el-icon color="red" size="30px">
  <Icon icon="ic:baseline-5k" />
</el-icon>

自定义图标的使用

unplugin-icons用于统一加载第三方图标库,从而实现图标使用方式的统一

1. 安装插件

npm i -D unplugin-icons

2. 配置

在vite.config.js中进行配置

import Icons from 'unplugin-icons/vite'

plugins:[
  Icons({
    compiler: 'vue3',
  }),
],

图标的封装

1. 图标组件封装 为方便统一使用iconPark,iconify,iconfont,element Plus图标，针对这四种图标进行了封装，统一使用规范，方便使用。

<!-- 
前期需要安装：@icon-park/vue-next和iconify/vue
并使用全局注册方式

说明：
 size：大小  默认为: 23px
 color:颜色  默认值: #333
 theme：主题 只有字节图标才有的属性，可选值: 'outline' | 'filled' | 'two-tone' | 'multi-color'
 
 案例：
 element plus图标vue2中的使用方式
 <base-icon el-name="el-icon-delete" color="red" ></base-icon>
  element plus 图标组件化使用方式
 <base-icon el-name="House"></base-icon> 
 阿里的 iconfont图标使用方式
 <base-icon ali-name="ali-icon-caidan" color="blue"></base-icon>
 字节跳动的iconPark 图标使用方式
 <base-icon byte-name="bookmark" color="yellow"></base-icon>
 iconify图标使用方式
 <base-icon ify-name="ic:baseline-5g" color="green"></base-icon>
-->

<template>
 <el-icon v-if="iconType=='el-text'" :size="size" :color="color"  :style="style">
    <component :is="elName"></component>
 </el-icon>
 <el-icon v-else-if="iconType=='el-comp'" :size="size" :color="color"  :style="style">
    <component :is="elName"></component>
    
 </el-icon>
  
<!-- 字节图标 -->
<icon-park v-else-if="iconType=='byte'" :type="byteName" :size="size" :fill="color" :theme="theme" :style="style"/>
  
<!-- 阿里图标使用 -->
<el-icon v-else-if="iconType=='ali'" :size="size" :color="color" :style="style">
  <svg aria-hidden="true">
    <use v-bind:xlink:href="`#${aliName}`"></use>
  </svg>  
</el-icon>

<!-- iconify图标 -->
<icon v-else-if="iconType=='ify'"  :icon="ifyName" :width="size" :color="color" :style="style" />

</template>

<script>
  import {IconPark} from '@icon-park/vue-next/es/all';
  import { Icon } from '@iconify/vue';
  export default {
    components:{
      IconPark,
      Icon
    },
    props:{
      elName:{
        type:String
      },
      aliName:{
        type:String
      },
      byteName:{
        type:String
      },
      ifyName:{
        type:String
      },
      svgName:{
        type:String
      },
      size:{
        type:[String,Number],
        default:'23px'
      },
      color:{
        type:String,
        default:'#333'
      },
      theme:{
        type:String,
        default:'outline'
      },
      style:{
        type:String
      }
    },
    data(){
      return{
        
      }
    },
    computed:{
      iconType(){
        let result="el-comp"
        if(this.elName!=undefined&&this.elName!=''){
         if(this.elName.startsWith("el")){
           result="el-text"
         }else{
           result="el-comp"
         }
        }else if(this.aliName!=undefined&&this.aliName!=''){
          result="ali"
        }else if(this.byteName!=undefined&&this.byteName!=''){
          result="byte"
        }else if(this.ifyName!=undefined&&this.ifyName!=''){
          result="ify"
        }
        else if(this.svgName!=undefined&&this.svgName!=''){
          result="svg"
        }
        return result;
      }
    },
   
    
  }
</script>

<style>

  .icon-base {
    width: 24px;
    height: 24px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;  
  }
  
.svgClass {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    outline: 0;
}
</style>

2. 使用方式

<!-- 
1.前期需要安装：@icon-park/vue-next和iconify/vue
并使用全局注册方式
2.在main.js中全局导入组件


说明：
 size：大小  默认为: 23px
 color:颜色  默认值: #333
 theme：主题 只有字节图标才有的属性，可选值: 'outline' | 'filled' | 'two-tone' | 'multi-color'
 
 案例：
 element plus图标vue2中的使用方式
 <base-icon el-name="el-icon-delete" color="red" ></base-icon>
  element plus 图标组件化使用方式
 <base-icon el-name="House"></base-icon> 
 阿里的 iconfont图标使用方式
 <base-icon ali-name="ali-icon-caidan" color="blue"></base-icon>
 字节跳动的iconPark 图标使用方式
 <base-icon byte-name="bookmark" color="yellow"></base-icon>
 iconify图标使用方式
 <base-icon ify-name="ic:baseline-5g" color="green"></base-icon>
 -->