vue 使用svg图片 svg-sprite-loader-白红宇

svg的图片有着颜色自定义大小自定义的优势。在可以下载svg图片。

那么在vue框架中我们该怎么使用svg图片呢

这个时候就用到了 webpack 插件 svg-sprite-loader

首先呢自然就是安装了

npm i svg-sprite-loader --save复制代码

创建svg文件目录/src/icons/svg 里面呢放置所有svg文件还有/src/icons/index.js

//index.jsimport Vue from 'vue'import SvgIcon from '@/components/SvgIcon'/* require.context("./test", false, /.test.js$/);    这行代码就会去 test 文件夹（不包含子目录） 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。    更直白的说就是 我们可以通过正则匹配引入相应的文件模块。     require.context有三个参数：     directory：说明需要检索的目录     useSubdirectories：是否检索子目录     regExp: 匹配文件的正则表达式 */// 全局注册Vue.component('svg-icon', SvgIcon)const requireAll = requireContext => requireContext.keys().map(requireContext)const req = require.context('./svg', false, /\.svg$/)requireAll(req)复制代码

在 webpack.base.conf.js 文件中添加 rules 配置

//webpack.base.conf.js      {        test: /\.svg$/,        loader: "svg-sprite-loader",        include: [path.resolve(__dirname, '../src/icons/svg')],//包括字体图标文件        // options: {
              //symbolId: 'icon-[name]' //这个没有生效，生效的是默认的name        // }      }复制代码

然后修改 url-loader 配置

//webpack.base.conf.js      {        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,        loader: "url-loader",        exclude: [          path.resolve(__dirname, '../src/icons/svg'), //排除字体图标文件        ],        options: {          limit: 10000,          name: utils.assetsPath("img/[name].[hash:7].[ext]")        }      }复制代码

创建 vue 组件 svg-icon


    
    复制代码

在main.js中引入

import './icons/index.js'复制代码

这样就能在vue中使用了具体格式如下


    复制代码

欢迎到我的博客、我的github逛哦！