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>