网站策划名词解释,沧州网站推广优化商集客电话,公司网站建设推荐,宣传软文模板概述
在 Vite 7 Vue 3 项目中使用 vite-plugin-svg-icons 插件来管理和使用 SVG 图标的完整解决方案。通过该插件#xff0c;可以实现 SVG 图标的按需加载、统一管理、自定义样式等功能#xff0c;提供了一个高效且灵活的 SVG 图标系统。
vite-plugin-svg-icons 插件
vit…概述
在 Vite 7 Vue 3 项目中使用 vite-plugin-svg-icons 插件来管理和使用 SVG 图标的完整解决方案。通过该插件可以实现 SVG 图标的按需加载、统一管理、自定义样式等功能提供了一个高效且灵活的 SVG 图标系统。
vite-plugin-svg-icons 插件
vite-plugin-svg-icons 是一个专门为 Vite 打造的 SVG 图标解决方案具有以下特点
按需加载: 只加载当前页面需要使用的图标减少资源请求自动打包: 将所有 SVG 图标打包成 SVG Sprite减少网络请求缓存优化: 支持浏览器缓存提高加载性能灵活配置: 提供丰富的配置选项满足不同场景需求TypeScript: 完整的 TypeScript 类型支持开发友好: 支持热更新开发体验优秀
安装依赖
npm install vite-plugin-svg-icons -D
项目结构
src/
├── assets/
│ └── icons/
│ ├── shoucang.svg
│ ├── dianzan.svg
│ └── fenxiang.svg
│ └── dashang.svg
├── components/
│ └── SvgIcon.vue
└── main.js
Vite 配置
// vite.config.js
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import { createSvgIconsPlugin } from vite-plugin-svg-icons;
import path from path;export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), src/assets/icons)],// 指定symbolId格式symbolId: icon-[dir]-[name],// 自定义插入位置inject: body-last,// 自定义dom idcustomDomId: __svg__icons__dom__,}),],resolve: {alias: {: path.resolve(__dirname, src),},},
});
入口文件配置
// main.js
import { createApp } from vue;
import App from ./App.vue;// 引入svg注册脚本
import virtual:svg-icons-register;const app createApp(App);
app.mount(#app);
SVG 图标组件
!-- components/SvgIcon.vue --
templatesvg:classsvgClass:style{ width: size, height: size }aria-hiddentrueuse :hreficonName :fillcolor //svg
/templatescript setup
import { computed } from vue;const props defineProps({name: {type: String,required: true,},size: {type: [String, Number],default: 16px,},color: {type: String,default: currentColor,},className: {type: String,default: ,},
});const iconName computed(() #icon-${props.name});
const svgClass computed(() {if (props.className) {return svg-icon ${props.className};}return svg-icon;
});
/scriptstyle scoped
.svg-icon {display: inline-block;vertical-align: middle;fill: currentColor;overflow: hidden;
}
/style
使用示例
!-- App.vue --
templatediv classmin-h-screen bg-gray-50 py-8div classmax-w-4xl mx-auto px-4div classspace-y-2!-- 收藏 --div classtext-centerh1 classtext-3xl font-bold text-gray-800 mb-4收藏/h1div classflex items-center justify-center gap-8SvgIcon nameshoucang size32px color#ff6b6b /SvgIcon nameshoucang size64px color#ff6b6b /SvgIcon nameshoucang size96px color#ff6b6b /SvgIcon nameshoucang size128px color#ff6b6b //div/div!-- 点赞 --div classtext-centerh1 classtext-3xl font-bold text-gray-800 mb-4点赞/h1div classflex items-center justify-center gap-8SvgIcon namedianzan size32px color#3b82f6 /SvgIcon namedianzan size64px color#3b82f6 /SvgIcon namedianzan size96px color#3b82f6 /SvgIcon namedianzan size128px color#3b82f6 //div/div!-- 分享 --div classtext-centerh1 classtext-3xl font-bold text-gray-800 mb-4分享/h1div classflex items-center justify-center gap-8SvgIcon namefenxiang size32px color#10b981 /SvgIcon namefenxiang size64px color#10b981 /SvgIcon namefenxiang size96px color#10b981 /SvgIcon namefenxiang size128px color#10b981 //div/div!-- 打赏 --div classtext-centerh1 classtext-3xl font-bold text-gray-800 mb-4打赏/h1div classflex items-center justify-center gap-8SvgIcon namedashang size32px color#f59e0b /SvgIcon namedashang size64px color#f59e0b /SvgIcon namedashang size96px color#f59e0b /SvgIcon namedashang size128px color#f59e0b //div/div!-- 添加类名 --div classtext-centerh1 classtext-3xl font-bold text-gray-800 mb-4打赏/h1div classflex items-center justify-center gap-8SvgIcon nameshoucang size32px classNamecustom-icon /SvgIcon namedianzan size32px classNamecustom-icon /SvgIcon namefenxiang size32px classNamecustom-icon /SvgIcon namedashang size32px classNamecustom-icon //div/div/div/div/div
/templatescript setup
import SvgIcon from /components/SvgIcon.vue;
/scriptstyle scoped
:deep(.custom-icon:hover) {transform: scale(1.2);fill: #007bff !important;
}:deep(.custom-icon:hover path) {fill: #007bff !important;
}:deep(.custom-icon:hover *) {fill: #007bff !important;
}
/style 常见问题
图标不显示检查 SVG 文件路径是否正确确认 vite-plugin-svg-icons 配置正确检查是否正确引入 virtual:svg-icons-register。图标颜色无法修改确保 SVG 文件中没有硬编码的 fill 属性使用 fillcurrentColor 或移除 fill 属性。 vitevue3工程-SVG图标配置使用指南——vite-plugin-svg-icons 插件 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享
