如何在react项目中使用阿里iconfont字体库的svg图标

阿里的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>

这样就可以避免命名冲突了