Iconfont使用的三种方式

Iconfont使用的三种方式

​ 作为一个前端开发,项目中用矢量图标是家常便饭,最近笔者项目中正好有使用,所以就抽空总结了一下阿里图标库的三种使用方法(笔者项目中用到的是Symbol 引用方式)

矢量图标库使用步骤如下:
  1. 首先需要登录阿里矢量图标库

​ 阿里矢量图标库:https://www.iconfont.cn/

  1. 挑选你需要的矢量图标并加入购物车

    • 点击步骤1把心仪的图标加入购物车
    • 加入完毕后,点击步骤2
      Iconfont使用的三种方式_第1张图片
  2. 准备下载你选好的图标代码

    • 点击步骤3所示的下载代码按钮,把你选好的图标的实现代码下载到项目本地
      Iconfont使用的三种方式_第2张图片
  3. 在自己的项目中引入第三步下载好的图标代码文件(iconfont文件),然后创建一个htmlcss文件
    Iconfont使用的三种方式_第3张图片

具体三种使用方式如下:
  1. Unicode引用方式(主要依赖下载下来的iconfont文件里面的iconfont.css文件)
  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
// html.index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont</title>
    <link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css">
    <style>
        .self-style {
            color: aquamarine;
        }
    </style>
</head>
<body>
    <div>Iconfont</div>
    <i class="iconfont self-style">&#xe623;</i>
</body>
</html>

// index.css
//项目下面生成
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff2') format('woff2'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
}
//项目下面生成
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

效果图如下:
Iconfont使用的三种方式_第4张图片

  1. font-class引用(主要依赖下载下来的iconfont文件里面的iconfont.css文件)
  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .self-style2 {
          	// 可以设置颜色
            color: pink;
          	// 可以设置大小
          	font-size: 40px;
        }
    </style>
</head>
<body>
    <div>Iconfont</div>
    <span class="iconfont self-style2 icon-lvzhi1"></span>
</body>
</html>

效果图如下:
Iconfont使用的三种方式_第5张图片

  1. Symbol 引用(主要依赖下载下来的iconfont文件里面的iconfont.js文件)

    symbol是一种全新的使用方式,是未来的主流,推荐使用

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont</title>
    <style>
        .icon-style {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <script src="./iconfont/iconfont.js"></script>
</head>
<body>
    <div>Iconfont</div>
		// 其中aria-hidden="true"这个属性由语义理解是影藏,所以个人理解是,当只有一个图标而没有其他额外说明的时候,自动忽略这个Icon,避免由图标引起的不必要的误导
    <svg class="icon-style" aria-hidden="true">
        <use xlink:href="#icon-lvzhi3"></use>
    </svg>
</body>
</html>

效果图如下:
Iconfont使用的三种方式_第6张图片
4.结合reactantdIcon,自定义组件用symbol的方式使用iconfont

antd的自定义icon,版本3.xx的用法如下图(4.xx版本自行查阅官网,用法大同小异):
Iconfont使用的三种方式_第7张图片
项目中代码如下:

  • 首先自定义一个SelfIcon组件
// 定义组件SelfIcon
import { Icon } from 'antd';

const SelfIcon = Icon.createFromIconfontCN({
 		// 特别要注意的是这个scriptUrl是项目在线生成的js地址,是build文件里面的iconfont路径
    scriptUrl: './iconfont.js',
    extraCommonProps: {
        // 这里可以去定义这个icon的大小等样式
        style: {
            fontSize: '2em',
        },
    },
});

export default SelfIcon;
  • 在页面中使用定义好的自定义SelfIcon组件
// 使用
import SelfIcon from '@/components/SelfIcon';
import React, { Component } from 'react';
class Index extends Component {
    render() {
        return (
          	// 注意与传统的symbol不同的是,拷贝的时候不要加上最前面的#号
          	// 比如这个icon图标symbol的表示代码是:#icon-lvzhi3
          	// 使用的时候type=“icon-lvzhi3”即可
            <SelfIcon type="icon-lvzhi3" />
        );
    }
}

export default Index;

效果图如下:
Iconfont使用的三种方式_第8张图片

看完这篇文章Iconfont的正确使用姿势你们学会了吗?

你可能感兴趣的:(Iconfont使用的三种方式)