【九月打卡】第17天 2022升级 React18+TS高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节：第7章 他山之石 - Icon 组件 和 Transition 组件

主讲老师：张轩

课程内容：

今天学习的内容包括：

7-2 他山之石 - Icon组件编码第一部分

课程收获：

安装

npm:
	npm i --save @fortawesome/fontawesome-svg-core 
    npm i --save @fortawesome/free-solid-svg-icons 
    npm i --save @fortawesome/react-fontawesome
yarn :
    yarn add @fortawesome/fontawesome-svg-core
    yarn add @fortawesome/free-solid-svg-icons
    yarn add @fortawesome/react-fontawesome

其中fontawesome-svg-core是核心库，free-solid-svg-icons是免费的icon，react-fontawesome就是icon 组件

第一种方式为Import引入：

import ReactDOM from 'react-dom'
	import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
	import { faCoffee } from '@fortawesome/free-solid-svg-icons'
	const element = <FontAwesomeIcon icon={faCoffee} size="10x"/>
	ReactDOM.render(element, document.body)

第二种方式Library ：
必须先引入：

npm i --save @fortawesome/free-solid-svg-icons
或
yarn add @fortawesome/free-solid-svg-icons

在app.js中引入

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

你也可以在这个字图标库上自己二次封装成自己的icon 组件。