vue3使用本地icon和动态引入element-plus的icon

一.动态引入element-plus的icon

1.安装：

npm install @element-plus/icons-vue

2. 引入mian.ts

import * as ElIcons from '@element-plus/icons-vue'
// 全局注册element-plus icon图标组件
Object.keys(ElIcons).forEach((key) => {//循环遍历组件名称
  if ("Menu" !== key) {//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀
    app.component(key, ElIcons[key as keyof typeof ElIcons]);
  } else {
    app.component(key + "Icon", ElIcons[key]);  //MenuIcon
  }
})

3.使用

<el-icon>
  <component :is="icon[ind]"></component>
</el-icon>

const icon = ref(['user', 'setting', 'shop','menu-icon'])

二.动态使用本地icon

1.新建src/components/SvnIcon/index.vue

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconNAme"></use>
  </svg>
</template>

<script setup>
import {defineProps, computed} from "vue";

const props = defineProps({
  icon: {
    type: String,
    required: true
  }
})
const iconNAme = computed(()=>{
  return `#icon-${props.icon}`
})
</script>

<style scoped>
.svg-icon{
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

2.新建src/icons/index.ts

import SvgIcon from '@/components/SvnIcon/index.vue'

const svgRequired = require.context('./svg', false, /\.svg$/)
svgRequired.keys().forEach((item: string) => svgRequired(item))
export default (app: any) => {
  app.component('svg-icon', SvgIcon)
}

3.新建src/icons/svg放入svg文件

4.main.ts引入

import SvgIcon from '@/icons'

SvgIcon(app)

5.使用

<svg-icon :icon="pwdShow ? 'eye-open' : 'eye'" @click="pwdShow=!pwdShow">
pwdShow 和eye-open为svg文件名