###
Vue 项目中正确引入
SVG 图片的方法
在
Vue 项目中，
SVG 文件可以通过多种方式被引入并展示。以下是几种常见的方法及其具体实现：
#### 方法一：通过 `<img>` 标签引入
可以直接使用 HTML 的 `<img>` 标签来加载外部的
SVG 文件。这种方式简单易用，适合静态资源。
```html
<img src="@/assets/images/example.
svg" alt="Example
SVG">
```
这种方法的优点在于兼容性强，缺点是无法直接修改
SVG 的样式或属性[^1]。
---
#### 方法二：作为组件引入
将
SVG 文件转换为
Vue 组件是一种更灵活的方式。可以在 `components` 下创建一个 `.
vue` 文件，并将
SVG 代码嵌入其中。
例如，在 `src/components/icons/IconLike.
vue` 中定义如下内容：
```
vue
<template>
<
svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</
svg>
</template>
<script>
export default {
name: 'IconLike'
}
</script>
```
然后在其他地方通过 `<IconLike />` 使用它[^5]。
---
#### 方法三：动态导入
SVG 并注册为
图标库
对于大型项目，推荐封装一个通用的
SVG 图标管理器。可以利用 Webpack 或 Vite 配置支持动态导入多个
SVG 文件。
##### 步骤 1：安装依赖
如果尚未配置，需先安装 `@
svgr/webpack` 插件（适用于 Webpack），或者调整 Vite 的插件设置。
```bash
npm install @
svgr/webpack --save-dev
```
##### 步骤 2：配置 Webpack/Vite
在 Webpack 配置文件中添加以下规则：
```javascript
module.exports = {
module: {
rules: [
{
test: /\.
svg$/,
use: ['@
svgr/webpack']
}
]
}
};
```
如果是基于 Vite，则无需额外操作，Vite 默认支持
SVG 动态导入。
##### 步骤 3：批量导入
SVG 图标
在项目的入口处（如 `main.js` 或 `plugins/icon.js`）编写脚本自动加载所有
SVG 文件：
```javascript
const requireAll = (context) => context.keys().map(context);
const icons = require.context('@/assets/icons', true, /\.
svg$/);
requireAll(icons);
```
这样就可以按需调用这些
图标了。
##### 步骤 4：封装全局组件
为了方便统一管理和渲染，可封装一个通用的 Icon 组件：
```
vue
<template>
<component :is="iconComponent" v-bind="$attrs"/>
</template>
<script>
import { defineAsyncComponent } from '
vue';
export default {
props: {
name: {
type: String,
required: true
}
},
computed: {
iconComponent() {
return defineAsyncComponent(() =>
import(`../assets/icons/${this.name}.
svg`)
);
}
}
};
</script>
```
使用时只需传入对应的名称即可：
```
vue
<Icon name="like" />
```
此方法不仅提高了灵活性，还能减少重复工作量[^4]。
---
#### 方法四：内联
SVG
有时可能希望直接将
SVG 嵌套到模板中以便于自定义其样式。此时可通过字符串解析工具完成这一需求。
例如，借助第三方库 `v-html-to-jsx` 将远程获取的
SVG 数据注入 DOM 结构中[^2]:
```javascript
fetch('/api/get-
svg')
.then(response => response.text())
.then(
svgData => this.$refs.container.innerHTML =
svgData);
```
注意安全性问题，确保数据来源可信以防 XSS 攻击。
---
### 性能优化建议
无论采用哪种方案，都应关注以下几个方面：
- **懒加载**：仅当用户滚动至可视区域时才加载不必要的大尺寸
图形；
- **压缩处理**：提前对原始素材进行无损缩减体积；
- **缓存策略**：合理运用浏览器 Cache-Control 头部字段延长生命周期[^3]。
---
最低0.47元/天 解锁文章
扫一扫
4142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
