iconify介绍
iconify是功能最丰富的图标框架。可以与任何图标库一起使用的统一图标框架。开箱即用的功能包括80多个图标集和超过70,000个图标 Vscode预览图标插件 Iconify IntelliSense
在vite中使用iconify
安装
代码语言：javascript复制#在组件可以快速使用所有图标,图标会通过在线导入
npm install --save-dev @iconify/vue 使用
代码语言：javascript复制<script setup>
import { Icon } from '@iconify/vue';
</script>
<template>
<Icon icon="ep:add-location" />
</template>svg图标的使用
如果还是大量的使用到svg图标就需要使用到
vite-plugin-svg-icons了 他可以帮助我们快速使用文件夹中svg图标，避免在代码在出现大量的svg的 代码
安装
代码语言：javascript复制npm install --save-dev vite-plugin-svg-icons配置
代码语言：javascript复制// vite.config.js
import { resolve } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 路径配置
const root = process.cwd()
function pathResolve(dir) {
return resolve(root, '.', dir)
}
export default () => {
return {
plugins: [
createSvgIconsPlugin({
iconDirs: [resolve(root, "src/assets/svgs")],// svg 图标保存的位置
symbolId: 'icon-[dir]-[name]',// 指定symbolId格式
svgoOptions: true
})
],
};
};//main.js
import 'virtual:svg-icons-register' //导入全局的svg图标使用
代码语言：javascript复制<template>
<svg aria-hidden="true" class="cp-icon">
<use href="`#icon-search" />
<!-- svg路径：src/assets/svgs/search.svg -->
</svg>
<svg aria-hidden="true" class="cp-icon">
<use href="`#icon-my-search" />
<!-- svg路径：src/assets/svgs/my/search.svg -->
</svg>
</template>
<script setup>
// 查看全部svg的名称
import ids from 'virtual:svg-icons-names'
console.log(ids);
</script>
