阿里的iconfont字体库是一个拥有很多字体图标资源的字体库,我们可以看到里面有很多的多彩图标。但是传统的classname方法跟unicode方法都没有办法支持多彩字体库。只有svg格式的图片才支持。
我们怎么才能使用这个呢?
首先我们将字体图标加入项目以后,在我的项目中会有三份代码生成。
这个时候我们把
把Symbol的代码复制,然后粘贴到了我们自己在项目中新建的font.js文件中就好了。
随后我们要在项目中进行引入,虽然font,js并没有模块化,但是还是可以直接使用requier进行引入。
import React from 'react'; import { hot } from 'react-hot-loader'; import { Hello } from './components/hello.jsx'; require('./font.js'); class App extends React.Component { constructor(){ super(); console.log("App"); } render() { return ( <div> <h1> <Hello /> Hello<br /> <input type="text" name="" id="" /> </h1> <svg className="icon" aria-hidden="true"> <use xlinkHref="#d-icon-dui"></use> </svg> </div> ) } } export default hot(module)(App)
而在后面,我们就可以使用svg了。重点在于className和xlinkHref
因为在阿里的文档上这两个是class跟xlinkHref的
我们还需要在我们用来生成html的模版html中或者全局的css中加入样式定义
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
这样才能进行正常的使用,这样我们就可以使用多彩图标了。
注意
有时候我们可能不止使用一个字体库,比如使用ionic进行开发的时候ionic就自带字体库
这个时候我们可以把前面的css的.icon换成自己自定义的class,然后在使用svg的时候className也换成哪个
.icon-svg { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
<svg className="icon-svg" aria-hidden="true"> <use xlinkHref="#d-icon-gou-check"></use> </svg>这样就可以避免命名冲突了