如何在React中使用带有样式组件的颜色图标字体？

如何解决如何在React中使用带有样式组件的颜色图标字体？

我需要使用带有样式组件的颜色图标字体。

我按以下方式检查Iconfont官方文档。如果要使用颜色图标，则需要引用为符号。我仍然不知道如何将其与样式组件一起使用。任何帮助表示赞赏。

引用为符号 我们建议使用这种新的使用方式，它将成为未来的主要趋势。

此用法是SVG的集合，其特征如下：

它支持多种颜色，摆脱了单色的局限性。

它可以通过某种技术来调整样式，就像字体一样。 兼容性差，它仅支持IE 9+和现代浏览器。 浏览器渲染SVG的性能比PNG差。

1。单击以生成代码并将其复制。

 //at.alicdn.com/t/font_1473319176_4914331.js

1. 添加通用的CSS代码（一次即可）。

   .icon { 宽度：1em;高度：1em； 垂直对齐：-0.15em; fill：currentColor; 溢出：隐藏； }

3。将图标的各个代码复制到页面中。

<svg class="icon" aria-hidden="true">
 <use xlink:href="#icon-xxx"></use>
 </svg>