Iconfont
使用的三种方式 作为一个前端开发,项目中用矢量图标是家常便饭,最近笔者项目中正好有使用,所以就抽空总结了一下阿里图标库的三种使用方法(笔者项目中用到的是Symbol
引用方式)
阿里矢量图标库:https://www.iconfont.cn/
挑选你需要的矢量图标并加入购物车
准备下载你选好的图标代码
Unicode
引用方式(主要依赖下载下来的iconfont
文件里面的iconfont.css
文件)// 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"></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;
}
font-class
引用(主要依赖下载下来的iconfont
文件里面的iconfont.css
文件)<!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>
Symbol
引用(主要依赖下载下来的iconfont
文件里面的iconfont.js
文件)
symbol是一种全新的使用方式,是未来的主流,推荐使用
font-size
, color
来调整样式。<!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>
效果图如下:
4.结合react
和antd
的Icon
,自定义组件用symbol
的方式使用iconfont
antd
的自定义icon
,版本3.xx的用法如下图(4.xx版本自行查阅官网,用法大同小异):
项目中代码如下:
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
的正确使用姿势你们学会了吗?