木灵鱼儿

木灵鱼儿

阅读：1961

最后更新：2020/12/12/ 22:17:33

如何管理系统中使用的图标

关于图标的方案，现阶段也就三种：

  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
木灵鱼儿

木灵鱼儿

发布了 718 篇文章获得点赞 0获得阅读 1961

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1961

相关文章

利用原生css实现hash哈希定位跳转偏移量处理利用原生css实现hash哈希定位跳转偏移量处理
ts实战：给没有类型声明的第三方库编写一个类型声明文件ts实战：给没有类型声明的第三方库编写一个类型声明文件
利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类