您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“React怎么封裝SvgIcon組件”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
相信使用過(guò)vue
的伙伴們,或多或少都接觸或使用過(guò)vue-element-admin
,其中許多封裝都不禁讓人拍案叫絕,因?yàn)楸救酥笆?code>vue入門(mén)前端的,所以對(duì)vue-element-admin
許多封裝印象深刻,現(xiàn)在從vue
轉(zhuǎn)react
之后,一直想把vue-element-admin
里面的封裝組件復(fù)刻到react
當(dāng)中使用,這次是SvgIcon
組件的react
封裝版本;
npm 安裝
npm i svg-sprite-loader -D
yarn 安裝
yarn add svg-sprite-loader -D
{ test: /.svg$/, loader: "svg-sprite-loader", include: path.resolve(__dirname, "../src/icons"), options: { symbolId: "icon-[name]" } }, { test: /.(eot|woff2?|ttf|svg)$/, exclude: path.resolve(__dirname, "../src/icons"), // 不處理 svg類型文件 use: [ { loader: "url-loader", options: { name: "[name]-[hash:5].min.[ext]", limit: 10000, outputPath: "font", publicPath: "font" } } ] },
index.ts中方法
const requireAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /.svg$/) requireAll(req) export {} // 默認(rèn)到處,ts如若不導(dǎo)出,會(huì)警告
import React from 'react' import PropTypes from 'prop-types' import './index.scss' const SvgIcon = (props: { iconClass: string; svgClass: string; fill: string ;click: MouseEventHandler<HTMLElement>}) => { const { iconClass, fill, svgClass,click } = props return ( <i aria-hidden="true" onClick={click}> <svg className={`svg-class ${svgClass}`}> <use xlinkHref={'#icon-' + iconClass} fill={fill} /> </svg> </i> ) } SvgIcon.propTypes = { // svg名字 iconClass: PropTypes.string.isRequired, // 自定義類名 svgClass: PropTypes.string, //自定義方法 click: PropTypes.func, // 填充顏色 fill: PropTypes.string, } SvgIcon.defaultProps = { fill: 'currentColor', svgClass: '', click: () => {}, } export default SvgIcon
import React from 'react' import SvgIcon from '@/components/SvgIcon' const Index = () => { return ( <div> <SvgIcon iconClass="礦泉水" /> </div> ) } export default Index
最終效果:
如果按照以上步驟操作的話,圖表還是不出來(lái),有可能是webpack中的配置出來(lái)問(wèn)題;
一般來(lái)說(shuō)打印requireAll(req)
出現(xiàn)以下一個(gè)數(shù)組才算成功,如果不是,你需要檢查下你的webpack是否將svg進(jìn)行其他操作,導(dǎo)致無(wú)法正常解析;
出現(xiàn)以下情況,可能你在你的webpack中配置了一些配置項(xiàng)將svg進(jìn)行base64轉(zhuǎn)碼了,導(dǎo)致svg無(wú)法正常解析;
此時(shí)檢查你的webpack:
“React怎么封裝SvgIcon組件”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。