下划线学习频道Appearance
svg 是一种基于可扩展标记语言（XML）的图形格式，具有 不会失真 ，更小的体积。为了在项目中更好的使用 svg, vite + vue 这种形式下 有三种
unplugin-icons , 能够识别本地 svg 文件，并且可以配合 iconify 图标库，利用 unplugin-auto-import 可以实现自动下载 使用到的 iconify 图标集
vite-plugin-svg-icons, 针对本地 svg 图标插件管理，通过配合 封装的 svg 组件，利用其精灵图的特性可以优化 svg 数量
@iconify/vue,一个已经封装好的 vue 组件用来直接使用 iconify 图标库，支持cdn 加载图片，并且会将加载后的图标存储在本地，也可以使用 本地下载好的 iconify 图标库
具体使用 -- unplugin-icons
安装插件
bash
npm i -D unplugin-icons创建文件 svgIconsPlugin.ts
js
/**
* @name svgIconsPlugin
* @description 配置使用svg图标
*/
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import path from 'path'
export const svgIconsPlugin = () => {
return Icons({
// @default 默认vue3
// compiler:'vue3',
/**
* 按需引入这个选项会自动为你的应用安装必要的运行时。这意味着你不需要手动导入或注册图标组件，它们会自动被引入并可用。
* */
autoInstall: true,
/**
* 这个选项允许你定义自己的图标集合。每个集合都是一个键值对，其中键是集合的名称，值是一个加载器函数，用于加载和处理图标。
*/
customCollections: {
/**
* FileSystemIconLoader
* 第一个参数是 SVG 图标的路径，文件名（不包括扩展名）将被用作图标的名称
* 第二个参数是这是一个处理函数，用于处理加载的 SVG 内容。在这个例子中，它将 SVG 的开头替换为 <svg fill="currentColor" 。
* 这意味着图标的颜色会使用 CSS 的 currentColor 值，从而允许你通过 CSS 控制图标的颜色。
*/
home: FileSystemIconLoader(path.resolve('src', 'assets/svg'), (svg) =>
svg.replace(/^<svg /, '<svg fill="currentColor" ')
)
}
})
}在 autoRegistryCmpPlugin 创建配合自动导入组件的图标库的配置方法 IconsResolver
js
/**
* @name autoRegistryCmpPlugin
* @description 按需加载，自动引入组件
*/
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import IconsResolver from 'unplugin-icons/resolver'
export const autoRegistryCmpPlugin = () => {
return Components({
// Auto register Element Plus components
// 自动导入 Element Plus 组件
resolvers: [
ElementPlusResolver(),
// 自动导入 svg 图标 用来配合 `unplugin-icons` 使用的
IconsResolver({
// prefix: 'icon', // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
enabledCollections: ['home', 'ic'] // 这是可选的，默认启用 Iconify 支持的所有集合 ic 是Iconify 集合
})
],
// 指定生成的 组件的 ts 文件目录
dts: path.resolve('types', 'components.d.ts'),
directives: true
})
}具体使用 -- vite-plugin-svg-icons
安装
bash
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D创建文件 svgSpriteIcons 文件配置插件
js
/**
* @name svgSpriteIcons
* @description 配置使用svg图标,需要配合组件 SvgIcon使用 用来优化svg 雪碧图效果
* @example <svg-icon icon-class="文件名.svg" />
*/
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export const svgSpriteIcons = () =>
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve('src', 'assets/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
/**
* custom dom id
* @default: __svg__icons__dom__
*/
customDomId: '__svg__icons__dom__'
})配合全局组件 SvgIcon 进行使用
@iconify/vue
安装
bash
npm install --save-dev @iconify/vue如果想使用本地的 iconify 图标，下载
bash
npm install --save-dev @iconify-icons/xx为了将图库自动导入参考创建了一个脚本
js
/**
* @name registryIconifyIcons
* @description 注册 从 @iconify-icons 自动导入的svg
*/
function toCamelCase(str: string) {
return str.replace(/-([a-z0-9])/g, function (_, letter) {
return letter.toUpperCase()
})
}
export function registryIconifyIcons(customCollections: string, icons: string[]) {
const fromPrefix = `@iconify-icons/${customCollections}`
return icons.reduce(
(acc, icon) => {
const fromKey = `${fromPrefix}/${icon}`
acc[fromKey] = [['default', toCamelCase(icon)]]
return acc
},
{} as { [key: string]: [[string, string]] }
)
}