如何用react封裝一款SVG 圖示元件

語言: CN / TW / HK

theme: channing-cyan highlight: night-owl


這是我參與11月更文挑戰的第9天,活動詳情檢視:[2021最後一次更文挑戰](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/") > TIP 👉 **不經一番寒徹骨,怎得梅花撲鼻香。____黃櫱禪師《上堂開示頌》**

前言

Web Component是前端界一直非常熱衷的一個領域,用第三方元件化的框架去實現的話,你需要依賴框架本身很多東西,很多時候我們只是簡單的幾個元件,不是很大,也不是很多,所以為了保證元件的`輕量,簡單`,其實這個時候我們並不想採用第三方的框架。 # SVG 圖示 ### import ```js import SvgIcon from '@/components/SvgIcon/SvgIcon.js'; ``` ### Props ##### 1. iconName * 型別:string (必填) * 預設值:無 * 說明:圖示名稱,必須與 src/components/SvgIcon/icon 目錄下的svg檔案的名稱一致 ##### 2. className * 型別:string | array | object(key: 樣式名,value: bool) * 預設值:無 * 說明:最外層元素樣式 ``` ``` ### 設定圖示大小和顏色 * 圖示的大小取決於當前字型的大小,圖示的顏色取決於當前字型的顏色,可通過以下兩種方式來設定圖示的大小和顏色: ###### 1. 通過父元素的樣式來設定 ```jsx harmony
``` ```css .icon-wrapper { font-size: 50px; color: red; } ``` ###### 2. 自定義class來設定 ```jsx harmony ``` ```css .icon-red { font-size: 50px; color: red; } ``` ### 增加新的圖示 * 只需要將新的 svg 放到 src/components/SvgIcon/icon 目錄下即可 ```js /** * SVG 圖示 */ import React from 'react'; import PropTypes from 'prop-types'; // 為保證測試用例執行,不使用webpack內建utils模組,單獨引入 import utils from '../../js/common/utils/index.js'; import './SvgIcon.scss'; // 動態載入svg圖示檔案 const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./icon', false, /.svg$/) requireAll(req) /** * SVG 圖示元件 */ export default class SvgIcon extends React.Component { // 入參型別檢查 static propTypes = { // 圖示名稱(必須與icon目錄下檔名一致) iconName: PropTypes.string.isRequired, // 最外層元素樣式 className: PropTypes.oneOfType([ PropTypes.string, PropTypes.array, PropTypes.objectOf(PropTypes.bool) ]) } constructor(props) { super(props); } /** * 選擇框最外層需要的class * @returns {string} */ getSvgClassName(){ return utils.clasx(this.props.className, { 'svg-icon': true }); } render() { return ( ); } } ``` 樣式這塊就先不放了 「歡迎在評論區討論」 #### 希望看完的朋友可以給個贊,鼓勵一下