目录
封装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即可
参考文章: