【工程化】icon图标的获取与使用

前言

icon图标的使用来源个人目前只知道雪碧图，实体字符和SVG。

雪碧图虽然能节约请求的资源，但缺少可变化性（例如缩放模糊，颜色固定等），而且开发人员每次都需要通过定位获取相应的icon，极不方便。

实体字符（iconfont）格式是SVG，使用方法和字体一样，但是只能是单色的。

最好的SVG图标，没啥缺点，现在有些第三方组件库都迁移到SVG。

个人之前使用过国外的iconmoon，觉得不好用，不推荐使用，所以使用方法放到最后记录。

推荐使用阿里的iconfont，图标多，下载方便，还能转成SVG。

iconfont

选择好图片后，点击下载代码，解压后是个项目，可以点击里面的html文件，查看用法，个人喜欢选择symbol。

然后除了官方给的用法，有三种使用方式。

第一种

在线引入地址到前端工程中，如果公司有ui提供，也可以上传到iconfont上。这个方案的缺点就是如果在线修改图标，地址也要重新生成。

先main.js中注册

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_1154049_w87h4oeytph.js" // 在 iconfont.cn 上生成
});

Vue.component("IconFont", IconFont);

在html中直接这样使用，type里是这个图标的名字。

<IconFont type="icon-icon-404" style="font-size: 100px" />

第二种

本地文件引入，这种方式cli会自动生成一个url地址，缺点就是不方便。

<img :src="Logo" alt="">

import Logo from "@/assets/logo.svg";
export default {
  components: {
    Logo
  }
};

第三种

修改cli的webpack的loader图标配置，把图标改写成函数式组件，具体配置在cli官网可找。

在vue.config.js中

chainWebpack: config => {
  const svgRule = config.module.rule("svg");

  // 清除已有的所有 loader。
  // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
  svgRule.uses.clear();

  // 添加要替换的 loader
  svgRule.use("vue-svg-loader").loader("vue-svg-loader");
}

把loader规则用npm下载vue-svg-loader，然后这样使用

<Logo />

import Logo from "@/assets/logo.svg";
export default {
  components: {
    Logo
  }
};

如果想看这个工程里所有loader规则有哪些，就在终端中输入:

Vue inspect > output.js

然后就会生成一个output.js配置文件

---

iconmoon

具体怎么使用这个网站不记录了，自定义后打包下载，打开文件

将这个selection.json文件上传至网站即可知道用了什么图标；

然后把整个文件放入vue工程中的src/assets里面

使用

又水了一篇~