本文共 2077 字，大约阅读时间需要 6 分钟。

使用 SVG 在 Vue 项目中优化图标加载

在 Vue 项目中优化 SVG 图标加载，可以通过两种主要方式实现：使用 svg-sprite-loader 和 vue2-svg-icon。以下是具体的实现步骤和代码示例。

一、安装相关依赖

第一种方式：使用 svg-sprite-loader

npm install svg-sprite-loader --save-dev

第二种方式：使用 vue2-svg-icon

npm install vue2-svg-icon --save-dev

二、Webpack 配置

在 build/webpack.base.conf.js 中添加以下配置：

{  test: /\.svg$/,  loader: 'svg-sprite-loader',  include: [resolve('src/icons')],  options: {    symbolId: 'icon-[name]' // 生成的 ID 会去掉 "svg" 前缀  }},{  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  loader: 'url-loader',  exclude: [resolve('src/icons')],  options: {    limit: 10000,    name: utils.assetsPath('img/[name].[hash:7].[ext]')  }}

三、创建 SVG 组件（使用 svg-sprite-loader）

代码示例

使用方法

在 Vue 组件中使用：

四、创建文件夹并注册 SVG 组件

1. 创建文件夹

创建 src/icons/svg 文件夹，存放所有 SVG 图标。

2. 在 index.js 中注册组件

import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'// 注册 SVG 组件Vue.component('svg-icon', SvgIcon)// 自动导入 SVG 文件const req = require.context('./svg', false, /\.svg\$/)const requireAll = requireContext => requireContext.keys().map(requireContext)requireAll(req)

五、在 main.js 中引入

import Vue from 'vue'import App from './App'import router from './router'// 引入 SVG 组件import './icons'Vue.config.productionTip = falsenew Vue({  el: '#app',  router,  components: { App },  template: '
   
 
   '})

六、使用 SVG 图标

单个使用示例

自动导入所有 SVG 文件

在 index.js 中：

import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'Vue.component('svg-icon', SvgIcon)// 自动导入所有 SVG 文件const req = require.context('./svg', false, /\.svg\$/)const requireAll = requireContext => requireContext.keys().map(requireContext)requireAll(req)

七、使用 vue2-svg-icon 的第二种方法

1. 安装依赖

npm install vue2-svg-icon --save-dev

2. 在 main.js 中注册组件

import Vue from 'vue'import App from './App'import router from './router'// 导入 SVG 组件import Icon from 'vue2-svg-icon/Icon'Vue.component('icon', Icon)// 注意：默认存储位置为 `assets/svg/`，请确保路径正确

3. 使用方式

注意事项

• 确保 SVG 文件名与配置一致，通常采用简短且有意义的命名方式。
• 如果需要自定义大小或颜色，可以在组件中通过 props 传递。
• 建议在开发环境中使用 svg-sprite-loader，生产环境中可以考虑优化 SVG 文件，减少 HTTP 请求。

通过以上方法，可以高效地在 Vue 项目中使用 SVG 图标，同时优化加载性能。

转载地址：http://bakh.baihongyu.com/