?

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

1、react安裝icon插件，使用插件里已經有的圖標

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

?

另一個可以直接使用的：

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

https://ionicons.com/

?

2、使用svg圖形：

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

搜索自己感興趣的圖標

svg下載

打開svg文件：復制svg內容，這是關鍵，省去了自己繪制SVG的麻煩

?制作圖標組件，以方便引用

引用組件，通過屬性pops把父組件的參數傳遞進來

?

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

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

?

?

參考：

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

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

下面這篇英文文章值得一讀，介紹了如何在React中使用SVG組件的幾種方法。文末還給了2個其他方法：使用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位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。