你不一定知道的七种图标

秋晓浦
414 阅读3分钟

1 栅格图片

直接使用图片作为图标当然是可以的，有用起来简单，兼容性好等优点。但是 1202 年了，这样的前端确实有点跟不上时代了。

  • 文本中布局不方便
  • 图片放大会有失真的问题
  • 图片需要路径，使用起来不太优雅
  • 图片多的时候，请求数会多一点
  • 不方便修改颜色

等等缺点，虽然 HTTP/2 改善了请求数啥的，还是问题多多，已经不推荐了。

2 使用 CSS 来直接绘制

首先用 css 来实现是一种非常节约资源的方式。 我们来看个例子

<div class="close icon"></div>

.close.icon {
  color: #000;
  position: absolute;
  margin-top: 0;
  margin-left: 0;
  width: 21px;
  height: 21px;
}

.close.icon:before {
  content: '';
  position: absolute;
  top: 10px;
  width: 21px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.close.icon:after {
  content: '';
  position: absolute;
  top: 10px;
  width: 21px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

这样就完成了一个 关闭 icon 确实可以，你要是特别喜欢这种语法，那可以去这个网站去看看

cssicon.space/

  • 大佬专用，一般人切勿尝试
  • 非常灵活，可维护性极差，容易被同事打
  • 图标大小位置与颜色也不方便控制

3 使用矢量字体（推荐）

这是非常好用的一种方式，极力推荐每个前端使用，我们来查看一个例子

@font-face {
  font-family: 'iconfont';  /* project id 1036637 */
  src: url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.eot');
  src: url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.woff') format('woff'),
  url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1036637_9f87xwa1wq7.svg#iconfont') format('svg');
}

使用起来

.icon {
  font-family:'iconfont',
    font-size:16px;
}
.icon-demo::before{
  content:"&#xe666";
    color:red;
}

这里推荐个网站 www.iconfont.cn 阿里巴巴矢量图标库

借助这个网站，可以方便的使用将图标管理起来。

可以在线生成对应的css 文件 只需要引用下，就可以直接通过类名可以来使用 甚至可以生成对应的js 来实现下面说到的svg精灵图的效果。

  • 可以设置大小颜色，放大不会失真
  • 兼容性好，大部分浏览器小程序都可以兼容
  • 方便管理与共享

4 雪碧图

基本可以算已经过时的一种产物了，1202年前端新项目还用雪碧图的话，可以算是守旧的典范了。 简单来介绍下雪碧图，就是把大量的图不叠加的拼接在一张图上，通过css属性的偏移来实现显示局部图片的效果。

  • 修改麻烦，一张图改了就需要重新生成
  • 放大容易失真，颜色也不方便设置
  • css动效基本无缘，无法面向未来
  • 确实能节约http请求，但相比于新增的维护性，不值一提

5 SVG图片

是一种比较理想的方式，放大也不容易失真，就是文件较大，有很多冗余信息。简单总结下

  • 渲染成本比较高
  • 可以设置多色
  • 放大缩小不容易失真，矢量
  • 其他和图片差不多

这个其实是挺好的技术，用的不多的原因很简单，现在的页面图标单色的比较多，拟物的时代过去了，哪天拟物图标又火起来的时候，用的人自然就多了。

6 使用canvas直接绘制

杀鸡用牛刀的典范，绘制个图标而已，这里不推荐大家使用，只是提供个思路。 对SVG转canvas感兴趣的推荐个框架 小程序的框架，感兴趣的同学可以去了解下。

7 SVG 精灵图

类似之前的雪碧图，最大的差别是一个svg中多个symbol，通过id，或者说传入的标识符决定显示的哪个symbol 用法是这样的

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
  • 渲染成本比较高 还不如png
  • 可以设置多色
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式
  • 兼容性较差，支持 ie9+,及现代浏览器
  • 放大缩小不易失真
avatar
文章
阅读
粉丝