在
Vue3 项目中使用 `
svg-sprite
-loader` 可以实现
SVG 图标的集中管理与高效复用，尤其适用于图标数量较多的项目。以下是一个完整的配置指南和使用方法。
### 配置步骤
1. **安装依赖**
首先需要安装 `
svg-sprite
-loader` 和 `
svgo-loader`（用于优化
SVG 文件）：
```bash
npm install
svg-sprite
-loader svgo-loader --save
-dev
```
2
. **创建
SVG 图标目录**
在项目 `src` 目录下创建一个专门存放
SVG 图标的文件夹，例如 `icons/
svg`，并将所有
SVG 图标文件放入该目录中 [^3]。
3
. **配置 `vite
.config.js` 或 `webpack
.config.js`**
如果你使用的是 Vite 构建工具，可以在 `vite
.config.js` 中添加如下配置；如果是 Webpack5，则修改 `webpack
.config.js`：
- **Vite 配置示例：**
```
js
import { define
Config } from 'vite';
import
vue from '@vite
js/plugin
-vue';
import path from 'path';
export default define
Config({
plugins: [
vue()],
resolve: {
alias: {
'@': path
.resolve
(__dirname, '
./src'
),
},
},
build: {
assetsDir: 'static',
},
optimizeDeps: {
include: ['
svg-sprite
-loader'],
},
css: {
preprocessorOptions: {
scss: {},
},
},
server: {
port: 3000,
},
configureWebpack: {
module: {
rules: [
{
test: /\
.svg$/,
loader: '
svg-sprite
-loader',
include: [path
.resolve
(__dirname, 'src/icons'
)],
options: {
symbolId: 'icon
-[name]',
},
},
{
test: /\
.svg$/,
loader: '
svgo-loader',
exclude: [path
.resolve
(__dirname, 'src/icons'
)],
options: {
plugins: [{ removeTitle: true }, { convertColors: { currentColor: '#000' } }],
},
},
],
},
},
}
);
```
- **Webpack 配置示例：**
```
js
const path = require
('path'
);
module
.exports = {
entry: '
./src/main
.js',
output: {
filename: 'bundle
.js',
path: path
.resolve
(__dirname, 'dist'
),
},
module: {
rules: [
{
test: /\
.svg$/,
use: [
{
loader: '
svg-sprite
-loader',
options: {
symbolId: 'icon
-[name]',
},
},
{
loader: '
svgo-loader',
options: {
plugins: [{ removeTitle: true }, { convertColors: { currentColor: '#000' } }],
},
},
],
include: [path
.resolve
(__dirname, 'src/icons'
)],
},
],
},
};
```
4
. **封装
SVG 图标组件**
创建一个全局组件 `
SvgIcon
.vue` 来统一调用
SVG 图标：
```
vue
<template>
<
svg :width="size" :height="size" viewBox="0 0 24 24">
<path :d="path" :
fill="color" />
</
svg>
</template>
<script>
export default {
name: '
SvgIcon',
props: {
name: {
type: String,
required: true,
},
color: {
type: String,
default: '#333',
},
size: {
type: [String, Number],
default: 24,
},
},
data
() {
return {
path: '',
};
},
mounted
() {
this
.load
Svg();
},
methods: {
async load
Svg() {
const res = await import
(`@/icons/${this
.name}
.svg?raw`
);
const parser = new DOMParser
();
const doc = parser
.parseFromString
(res
.default, 'image/
svg+xml'
);
const pathElement = doc
.querySelector
('path'
);
if
(pathElement
) {
this
.path = pathElement
.getAttribute
('d'
);
}
},
},
};
</script>
```
5
. **全局注册组件**
在 `main
.js` 中注册 `
SvgIcon` 组件为全局组件：
```
js
import { createApp } from '
vue';
import App from '
./App
.vue';
import
SvgIcon from '
./components/
SvgIcon
.vue';
const app = createApp
(App
);
app
.component
('
SvgIcon',
SvgIcon
);
app
.mount
('#app'
);
```
6
. **使用方式**
在模板中通过传入图标名称、颜色和尺寸来使用
SVG 图标：
```
vue
<template>
<div>
<
SvgIcon name="home" color="#f00" size="32" />
</div>
</template>
```
### 注意事项
- 确保
SVG 文件命名规范且没有多余样式，避免加载时出现问题。
- 使用 `symbolId` 选项可以自定义生成的
SVG 符号 ID，便于在 HTML 中引用。
- 若项目中使用 TypeScript，需确保
SVG 文件导入方式支持类型声明 [^2]。
扫一扫
3859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
