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

使用 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 = false
new 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/