Vue3+TS中svg图标的利用-@unocss/preset-icons

@unocss/preset-icons 是 UnoCSS 提供的图标预设，支持从 本地和在线图标库 加载图标，本文介绍本地图标库的利用
  从 https://blog.csdn.net/u013737132/article/details/145499595 得知vite-plugin-svg-icons 插件停止维护，依赖过时，便整理替代品
预备svg文件

   src/assets/icons下随意创建文件夹custom,menu

从网络上下载svg文件复制到两个文件夹下
  安装依赖

1. pnpm add -D unocss @iconify/utils glob

复制代码

配置文件

vite.config.ts

1. ...
2. import vue from '@vitejs/plugin-vue'
3. // 导入Unocss插件
4. import Unocss from 'unocss/vite'
5. ...
6. export default defineConfig({
7.         plugins: [
8.         vue(),
9.         // 注册Unocss插件
10.         Unocss(),
11.     ]
12. })

复制代码

uno.config.ts

1. import { defineConfig, presetIcons, presetWind3 } from "unocss";
2. import { FileSystemIconLoader } from "@iconify/utils/lib/loader/node-loaders";
3. import { globSync } from 'glob'
4. import path from 'node:path'
6. /**
7. * 获取 src/assets/icons/ 目录下的所有 svg图标文件
8. * 实际只适用 icons的下一级目录，再下级目录不支持
9. */
10. const iconsDirPattern = "./src/assets/icons/**/*.svg";
11. const files = globSync(iconsDirPattern, { nodir: true }) // nodir:true 不匹配目录，只匹配文件
12. // 读取本地 SVG 目录，获取所有 svg 图标，并按照文件夹分类
13. /**
14. * 返回数据格式
15. * {
16. *   menu: [ 'i-menu:home' ],
17. *   custom: [
18. *     'i-custom:welcome',
19. *     'i-custom:refresh',
20. *     'i-custom:phone',
21. *     'i-custom:logout',
22. *     'i-custom:lock',
23. *     'i-custom:loading',
24. *     'i-custom:juejin',
25. *     'i-custom:home',
26. *     'i-custom:full-screen',
27. *     'i-custom:exit-full',
28. *     'i-custom:copyright'
29. *   ]
30. * }
31. */
32. function getIcons() {
33.   const icons = {}
34.   files.forEach((filePath) => {
35.     const fileName = path.basename(filePath) // 获取文件名，包括后缀
36.     const fileNameWithoutExt = path.parse(fileName).name // 获取去除后缀的文件名
37.     const folderName = path.basename(path.dirname(filePath)) // 获取文件夹名
38.     if (!icons[folderName]) {
39.       icons[folderName] = []
40.     }
41.     icons[folderName].push(`i-${folderName}:${fileNameWithoutExt}`)
42.   })
43.   return icons
44. }
45. const icons = getIcons()
46. /**
47. * 读取本地 SVG 目录，获取所有 svg 图标，并按照文件夹分类
48. * 返回数据格式
49. * collections {
50. *   menu: [AsyncFunction (anonymous)],
51. *   custom: [AsyncFunction (anonymous)]
52. * }
53.   */
54. const collections = Object.fromEntries(Object.keys(icons).map(item => [
55.   item,
56.   FileSystemIconLoader(`src/assets/icons/${item}`, (svg) => {
57.     return svg.includes('fill="')
58.       ? svg
59.       : svg.replace(/^<svg /, '<svg fill="currentColor" ');
60.   })
61. ]))
63. /**
64. * 使用安全列表，在UnoCSS中使用动态生成的className名称
65. * 提前声明那些动态生成的类名，以确保它们在最终的CSS中被包含
66. * 返回数据格式
67. * [
68. *   'i-menu:home',
69. *   'i-custom:welcome',
70. *   'i-custom:refresh',
71. *   'i-custom:phone',
72. *   'i-custom:logout',
73. *   'i-custom:lock',
74. *   'i-custom:loading',
75. *   'i-custom:juejin',
76. *   'i-custom:home',
77. *   'i-custom:full-screen',
78. *   'i-custom:exit-full',
79. *   'i-custom:copyright'
80. * ]
81. */
82. const generateSafeList = () => {
83.   return Object.keys(icons).flatMap((item) => icons[item])
84. };
86. export default defineConfig({
87.   presets: [
88.     // https://unocss.dev/presets/wind3
89.     presetWind3(),
90.     // 预设图标
91.     presetIcons({
92.       warn: true,
93.       prefix: ['i-'],
94.       // 设置全局图标默认属性
95.       extraProperties: {
96.         width: "1em",
97.         height: "1em",
98.         display: "inline-block",
99.       },
100.       // 注册本地 svg 图标集合
101.       collections,
102.     }),
103.   ],
104.   safelist: generateSafeList(), // 动态生成 `safelist`
105. });

复制代码

利用图标

1. <template>
2.   <div class="home">
3.     <h2>home</h2>
4.     测试preset-icons
5.     <i class="i-custom:exit-full text-#0033cc text-2xl" />
6.     <i class="i-menu:refresh" />
7.     <i class="i-custom:juejin text-red text-[50px]" />
8.     <i class="i-custom:lock hover:text-sky " />
9.   </div>
10. </template>
12. <script setup lang="ts">
13. </script>
15. <style scoped>
17. </style>

复制代码

  i-: 固定前缀

menu或custom: 文件夹名

exit-full或refresh等: svg文件名

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。