react使用引入svg的icon；svg圖形制作

 

由於手頭的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