003、Vue3 + Vite + TypeScript + Element-Plus，第一个后台管理项目走向第3步：继续整合svg图标+scss+UnoCSS

原创

已于 2024-03-31 14:59:35 修改 · 1.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

于 2024-03-31 14:58:43 首次发布

本文介绍了如何在Vite项目中整合SVG图标、SCSS样式和UnoCSS原子化CSS引擎，包括安装依赖、配置文件、组件封装以及使用全局变量等内容，为开发者提供了一个实践示例。

一、说明

写这篇文章，只是为了记录我创建的记录，大家可以参考，有问题可以留言，一起讨论

二、整合 SVG 图标

可以参考这里 vite-plugin-svg-icons/README.zh_CN.md at main · vbenjs/vite-plugin-svg-icons · GitHubhttps://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md

通过它来引入svg图标

安装依赖

pnpm install fast-glob vite-plugin-svg-icons -D

找到3个svg图放在这里

main.ts 引入注册脚本

// src/main.ts
import 'virtual:svg-icons-register';

vite.config.ts 配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

plugins: [
。。。。。
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
})
]