vuecli3的svgicon_vue-cli3使用svg的最佳实践

目录

封装svg组件

svg雪碧图

自动导入svg图标

封装svg组件

代码都是基于 vue 的实例(ps: react 也很简单，原理都是类似的)

//components/Icon-svg

export default {

name: 'icon-svg',

props: {

iconClass: {

type: String,

required: true

}

},

computed: {

iconName() {

return `#icon-${this.iconClass}`

}

}

}

.svg-icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

使用svg组件

//引入svg组件

import IconSvg from '@/components/IconSvg'

//全局注册icon-svg

Vue.component('icon-svg', IconSvg)

//在代码中使用

svg雪碧图

通过这篇文章 iconfont的三种使用方式及其优缺点，我们已经能在项目中使用svg图标了，但是有一个麻烦是，eg：我们会在iconfont上面创建一个项目，然后把需要的图标添加到项目里，接下来再生成文件，然后把文件保存下来。然而当我再去添加几个图标的时候，上面的动作我们需要重来一遍，这个太麻烦了，所以我们会用到svg-sprite(svg雪碧图,跟以前的css-sprite类似)。具体操作如下：

使用svg

配置好以后，我们把svg文件都放到根目录的icons下面，使用的时候，需要那个就加载那个，举例：(这里的svg-icon是我们上面封装的svg组件)

import '@/icons/svg/me.svg'

export default {

}

我们在项目中使用了很多svg图标，svg-sprite-loader能帮我们把这些图标合成一张大的雪碧图，就像这样

自动导入所有图标

经过上面的一波操作，我们实现了按需加载，如果我们要添加图标，直接往icons里放就好了，这个svg的图标可以是你们ui制作的，也可以是从iconfont图标库download下来的。不过，这里还有两个地方可以再优化一下。

自动导入所有图标

首先我们创建一个专门放置图标 icon 的文件夹如：@/src/icons，将所有 icon 放在这个文件夹下。 之后我们就要使用到 webpack 的 require.context。很多人对于 require.context可能比较陌生，直白的解释就是

require.context("./test", false, /.test.js$/);

这行代码就会去 test 文件夹(不包含子目录)下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。

更直白的说就是 我们可以通过正则匹配引入相应的文件模块。

require.context有三个参数：

directory：说明需要检索的目录

useSubdirectories：是否检索子目录

regExp: 匹配文件的正则表达式

了解这些之后，我们就可以这样写来自动引入 @/src/icons 下面所有的图标了

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./svg', false, /\.svg$/)

requireAll(req)

复制代码之后我们增删改图标直接直接文件夹下对应的图标就好了，什么都不用管，就会自动生成 svg symbol了。

批量下载单个svg文件

我们上面的操作，在icons里面，一个svg文件就是一个图标，而阿里图标库下载下来的文件是把所有的图标都合在一个文件里面，这显然不符合我们的要求，但是一个一个去下载也觉得麻烦，这时可以这样操作

点击批量操作，选择要添加的图标，点击批量加入到购物车，去购物车页面，点击下载素材，出现以下页面，点击svg即可

参考文章：