使用 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/`，请确保路径正确