?

由于手頭的icon有限，需要使用更多的圖標(biāo)，就得找外援：

1、react安裝icon插件，使用插件里已經(jīng)有的圖標(biāo)

https://react-icons.netlify.com/#/

React Icons

?

Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Installation

npm install react-icons --save

Usage

import { FaBeer } from 'react-icons/fa';class Question extends React.Component {render() {return <h3> Lets go for a <FaBeer />? </h3>} }

More info

https://github.com/react-icons/react-icons

?

另一個(gè)可以直接使用的：

https://blog.csdn.net/qq_34057640/article/details/70908085

https://ionicons.com/

?

2、使用svg圖形：

在網(wǎng)站：http://www.iconfont.cn/search/index?q=%E7%B1%BB%E5%9E%8B&page=1&fromCollection=1

搜索自己感興趣的圖標(biāo)

svg下載

打開svg文件：復(fù)制svg內(nèi)容，這是關(guān)鍵，省去了自己繪制SVG的麻煩

?制作圖標(biāo)組件，以方便引用

引用組件，通過屬性pops把父組件的參數(shù)傳遞進(jìn)來

?

?svg的viewBox用來干嘛？：https://segmentfault.com/a/1190000009226427

svg圖形制作網(wǎng)站：http://svg.wxeditor.com/? 實(shí)在找不到滿意的圖形，只能是自己繪制了

?

?

參考：

1、https://cloud.tencent.com/developer/article/1009780

2、https://juejin.im/post/5b567ec0e51d4519962ecb8c

下面這篇英文文章值得一讀，介紹了如何在React中使用SVG組件的幾種方法。文末還給了2個(gè)其他方法：使用webpack加載器直接把SVG文件加載為組件；React Inline SVG?—?A react component that takes SVG file paths as prop to render them on the document

3、https://blog.lftechnology.com/using-svg-icons-components-in-react-44fbe8e5f91

4、https://github.com/necolas/icon-builder-example

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的react使用引入svg的icon；svg图形制作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。