关于图标的方案,现阶段也就三种:

  1. 雪碧图
  2. 字符图标
  3. svg

雪碧图

雪碧图就是将多个图标图片合并到一张图里面,前端通过控制图片的大小位置来进行显示。但是也有缺陷,就是图片的清晰度了,如果放大了,就会显的很模糊。

字符图标

字符图标是目前最成熟的一种方案,使用简单,并且是和字体一样的,放大依旧很清晰。但是他的缺点就是不支持多色图标,也就是一个字符图标,他无法同时显示多种颜色。

svg

svg是最近开始兴起的,它是一种组件化封装的方式,将svg代码化,以达到控制的目的,而且相对于字符字体,svg本身有很多优势,比如动画,多色等等

因为组件化了,所以我们可以按需引入,虽然字符图标也可以,但是那种是需要平台的支持,如果对方只提供了一个包括很多图标的字体文件,即便你使用的是其中几个,你也必须要全部下载完毕才能使用。

图标平台

首推的就是阿里的ICONfont了

阿里巴巴矢量图标库

如果你已经用过了,应该已经明白了,这个网站是多么的好用了。

网站提供了三种使用图标的方式:

  1. Unicode
  2. font class
  3. Symbol

前两种都是字体的方式,其中常用的就是font class了

symbol是svg的方式,当我们查看在线链接的时候,生成的是一个js文件。里面存储着我们所需要使用的图标。

使用svg

Ant Design of Vue

在Ant Design of Vue平台上,是支持对接阿里的svg图标的。

打开main.js文件

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

Vue.component("IconFont",IconFont);

scriptUrl的参数为阿里图标生成的在线链接

然后我们把这个注册为全局的组件

使用时:

<template>
  <IconFont type="icon-xxx" />
</template>

type的值为图标的名称,然后我们可以像设置字体大小一样设置图标的大小。

单个svg文件

如果没有平台的支持,可能是单个的svg文件,我们就不能像上面那样使用了。

我们可以将这个svg文件引入,然后在data中挂载,然后绑定到img的src属性上,也是可以使用的。

如果你不想通过img元素来显示svg,那么就是组件化svg了。

我们需要使用到一个vue-cli的配置和插件:vue-svg-loader

先进行安装:

yarn add vue-svg-loader

安装完毕我们还需要配置一些解析器

打开vue.config.js

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

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

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

配置完记得重启项目。

配置完毕后,我们import引入的svg文件会被解析为一个组件。

<template>
  <Logo />
</template>
<script>
import Logo from "../logo.svg";
export default {
  components:{
    Logo 
  }
}
</script>

我们可以像组件一样使用它,最终的他渲染的结果是一个svg元素。这个Logo组件其实是一个函数式组件。

以上就是关于图标的一些学习分享。

分类: vue 开发实战(完结) 标签: svgvue图标icon字符图标Unicodefont classSymbolvue-svg-loader

评论

暂无评论数据

暂无评论数据

目录