关于项目中的svg图标使用

九月251
121 阅读2分钟

在Vue2项目中使用svg图标

我们要了解三个概念，分别是什么是svg、webpack中的require.context、以及svg-sprite-loader这个工具

1.什么是svg

关于SVG的概念(SVG：可缩放矢量图形 | MDN (mozilla.org))

在MDN中对SVG的解释是这样的，可缩放矢量图 SVG（Scalable Vector Graphics，SVG）基于XML标记语言，用于描述二维的矢量图形。 说人话就是不管怎么放大缩小都不会影响显示内容的一种字体图标。作为矢量图它不管怎么放大或者缩小都不会影响图片质量。

2.webpack中的require.context

这个api的作用是帮助我们动态的加载我们想要的文件，（可以递归目录），在前端工程中如果需要批量导入某个文件夹中的模块，就可以使用这个api。

代码示例：

require.context(directory, useSubdirectories, regExp, mode) 
# directory 表示检索的目录 
# useSubdirectories 表示是否检索子文件夹 
# regExp 匹配文件名的正则表达式 
# mode 加载模式，同步/异步 (sync/async)

值得注意的是这个方法的返回值是一个函数，（其实函数也是一个对象），通过返回结果的三个属性resolve、 keys、id（其中resolve和keys是函数类型），在使用svg图标的情况下要使用这个返回值的keys

3.svg-sprite-loader插件的使用

安装svg-sprite-loader

npm i svg-sprite-loader -D

配置vue.config.js文件

image.png
将以下代码配置在上图的节点中，注意的是文件路径一定要对应

//将这段代码放在(vue.config.js)webpackpe配置项中
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
资源路径配置

image.png

svg中放置我们要使用的图标文件

注册全局组件

在components中注册一个全局组件，用于展示svg图标 image.png

在icos/index.js内进行如下配置

image.png

其中用到了我们之前介绍的 require.context() 我们可以打印一下看看 req.keys() 和 requireAll(req)的结果是

image.png

由此可见我们通过扫描得到文件名数组，来把每一个文件转化成了对应的模块

总结： 通过 svg-sprite-loader工具包配合webpack中的require.context,将所有以.svg为后缀的文件作为模块导入到这个项目中，配合注册全局组件来进行图表展示

avatar
文章
阅读
粉丝