「React食用指南」之Iconfont

iconfont.cn->iconfont海量图标入口

管理Iconfont.cn的图标

🛒将喜欢的icon加入购物车->购物车结算

💰结算->添加至项目

至此，添加Icon的步骤已经结束，开启React项目中使用旅程

React项目中食用Icon

众所周知，React以组件化为名，因此Icon将以组件的形式出现

安装 @ant-design/icons 图标组件包

npm install --save @ant-design/icons

在React中新建一个Icon.js文件处理iconfont.cn中图标

将添加的Icon引入项目，实现在组件中更改name就可以食用项目中的不同Icon

import { createFromIconfontCN } from "@ant-design/icons";

const IconStyle = createFromIconfontCN({
    scriptUrl: [
        // 这里的url为上述所说icon-url
        '//at.alicdn.com/t/c/font_3860496_extkl64jo7l.js'
    ],
});

const Icon = (props) => {
    return (
        <IconStyle type={`icon-${props.name}`} />
    )
}

export default Icon

🌰食用--App.js中引入Icon

import React from "react";
import Icon from "./components/Icon";

function App() {
  return (
    <div className="App">
      //name为上述标注name中icon-后面的内容
      <Icon name='arrow-right'></Icon>
    </div>
  );
}

export default App;

最终显示结果：

后续如果需要在某个组件中引用icon依旧是这样的方式。第一次写文很不成熟，希望能给大家帮助。😁