vue3 + vite 中使用 svg-icon 的图标

element-plus icon的使用方式

- 安装 npm install @element-plus/icons-vue
- 在 main.js 中引入 
	import * as ElementPlusIconsVue from '@element-plus/icons-vue'
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	  app.component(key, component)
	}
- 使用方式 
  <el-icon class="is-loading"><Loading /></el-icon>  // 方式 一
  <Edit style="width: 1em; height: 1em" /> // 方式 二

iconify icon的使用方式(2024)

-  安装 npm install --save-dev @iconify/vue 
-  在main.js 注册  / 在页面中注册
   import { Icon } from '@iconify/vue';
   app.component('Icon', Icon) // 页面中使用不需要这一句
-  使用
   <Icon icon="twemoji:1st-place-medal" />  // icon="图标库名:图标名称"
   <Icon icon="twemoji:antenna-bars" />

**图标库：https://icon-sets.iconify.design/**

.svg 文件 当 icon 的使用方式

 - 安装 npm install vite-svg-loader --save-dev
 - 在 vite.config.js plugins 中注册
	plugins: [svgLoader()]
 - 在页面中使用
 	import IconCode from '@/icons/code.svg'  // 在 icons 文件夹下引入此图标
 	<IconCode style="width: 20px; height: 20px; background: purple" />  // 直接在页面上使用

使用 vite-plugin-svg-icons 引入svg 的方式

- 安装 npm i vite-plugin-svg-icons -D
- 在main.js 引入 
import 'virtual:svg-icons-register'
- 在components 创建一个 svgicon 的组件 
<template>
<svg  aria-hidden="true"  :class="svgClass" :style="{ width: iconSize + 'px', height: iconSize + 'px' }" >
<use :xlink:href="symbolId" />
</svg>
</template>
<script setup>
const props = defineProps({
iconPrefix: {type: String,default: 'icon'},
iconName: {type: String, required: true},
iconSize: {type: [Number, String], default: 12 },
className: {type: String, default: ''}
})
const symbolId = computed(() => `#${props.iconPrefix}-${props.iconName}`)
const svgClass = computed(() => {
if (props.className) { return 'svg-icon ' + props.className} .
else { return 'svg-icon' }
})
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.2em;
fill: currentColor;
overflow: hidden;
}
</style>
- 在 vite.config.js 中注册
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
plugins:[  
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons')], // src/icons 文件夹自定义自己的图片存储位置
// iconDirs: [fileURLToPath(new URL('./src/icons', import.meta.url))],
// 指定symbolId格式
symbolId: 'icon-[name]'
})]
- 在页面中使用
<SvgIcon iconName="icon_1" style="width: 30px; height: 30px" /> // 
<SvgIcon iconName="code" iconSize="30" />
<SvgIcon iconName="icon_1" />

使用 unplugin-icons 引入 svg icon图标

- 安装 npm i unplugin-icons -D
- 在 vite.config.js 中引入 
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import IconsResolver from 'unplugin-icons/resolver'
- 在 Components.resolvers 中配置 
Components({
// 全局组件导入 自动导入 组件目录
dirs: ['./src/components/'],
extensions: ['vue'],
deep: true, // 搜索子目录
dts: false, // 不使用ts
include: [/\.vue$/, /\.vue\?vue/], // 只识别vue文件
directoryAsNamespace: true, // 命名冲突
resolvers: [
ElementPlusResolver(),
IconsResolver({
// prefix: 'icon', // 设置图标组件的默认前缀 不设置 为 i
customCollections: ['wm'], // 这个 wm 是自定义 根据自己需求修改
enabledCollections: ['ep', 'twemoji'] // 在 iconify 找到icon的前缀在此注册 在页面中就可以直接使用 ep 是element-plus 的图标前缀
})
]
}), 	
- 在 plugins 中注册 icons 
Icons({
compiler: 'vue3',
autoInstall: true,
customCollections: { // 此处的 wm 与 上面的 wm 名称需要保持一致
wm: FileSystemIconLoader('./src/icons') // 获取本地 图标路径
}
}),
- 在 页面中使用 
<el-icon size="60"> // 自定义的 必须要使用 el-icon 包裹
<i-wm-icon_60 />  // 自定义的 名称 i + wm + 图标的名称
</el-icon>
<el-icon size="60">
<Icon icon="fluent:device-eq-20-filled" />  // 也可以搭配 Icon 组件使用
</el-icon>
<el-icon size="60">
<Icon icon="twemoji:ab-button-blood-type" />  // 使用 twemoji 的图标
</el-icon>