vite3+vue3如何封装一个健壮的【SVG插件】？

鍓嶈█鏈嬪弸浠ぇ瀹跺ソ锛屾垜鏄唬鐮佽瘲浜篲锛屼粖澶╃粰澶у浠嬬粛涓€涓嬪浣曚娇鐢╲ue3+vite3灏佽涓€涓仴澹殑svg鎻掍欢锛侀鍏堜綘瑕佺煡閬撲负浠€涔堣鐢╯vg杩欎釜姒傚康锛歋VG鏄竴绉嶅熀浜嶺ML鐨勭煝閲忓浘褰㈡牸寮忥紝SVG闆嗘垚浜咲OM銆乆SL绛塛3C鏍囧噯锛岀敤浜庡湪Web涓婃樉绀哄悇绉嶅浘褰㈠拰鍏朵粬鐜锛涘畠鍏佽鎴戜滑缂栧啓鍙缉鏀剧殑2D鍥惧舰锛屽苟涓斿彲浠ラ€氳繃CSS鎴朖avaScript杩涜鎿嶄綔銆傚畠鐢变竾缁寸綉鑱旂洘寮€鍙戯紝鏄竴涓紑鏀炬爣鍑嗐€備紭鐐癸細鍙墿灞曟€с€佸搷搴旀€с€佷氦浜掓€с€佸彲缂栫▼鎬с€佷綋绉皬銆佹€ц兘楂樸€傚洜涓篠VG鏄熀浜庣煝閲忕殑锛屾墍浠ュ湪鏀惧ぇ鍥惧舰鏃朵笉浼氫涪澶辨垨涓㈠け淇濈湡搴︺€傚畠鍙槸閲嶆柊缁樺埗浠ラ€傚簲鏇村ぇ鐨勫昂瀵革紝杩欎娇寰楀畠闈炲父閫傚悎鍝嶅簲寮忕綉椤佃璁＄瓑澶氫笂涓嬫枃鍦烘櫙銆傝€屼笖鎬ц兘涔熼潪甯稿嚭鑹诧紝涓嶨IF銆丣PG鍜孭NG绛夊厜鏍呭浘褰㈢浉姣旓紝SVG鍥惧舰閫氬父鏄洿灏忕殑鏂囦欢銆傛祻瑙堝櫒鏀寔锛歴vg瀵瑰競闈笂甯歌鐨勬祻瑙堝櫒宸茬粡鏈変簡寰堝ソ鐨勬敮鎸?*鎵€浠ワ紝缁间笂鎵€杩帮紝鍦ㄦ棩甯稿紑鍙戜腑浣跨敤svg浠ｆ浛鍥剧墖鍜屽浘鏍囨槸鎴戜滑鏈€濂界殑閫夋嫨锛?*#涓轰粈涔堣灏佽濡傛灉涓嶅皝瑁卻vg锛屼唬鐮佷細寰堥毦缁存姢锛屽彲璇绘€ф瀬宸紝渚嬪锛氱湅灏佽鍚庣殑浠ｇ爜鏁堟灉锛氫竴涓嚜瀹氫箟鏍囩缁勪欢灏卞彲浠ユ悶瀹氾紝涔熸槸鏂逛究缁存姢鍜岄槄璇?svg-iconiconName="q"/>涓嬮潰寮€濮嬪啓鎻掍欢鍜岀粍浠舵潵瀹炵幇銆傜涓€姝ュ垎涓?涓楠わ細鍒涘缓鎵€闇€鐨勬枃浠躲€傦細浣跨敤vitetransformIndexHtml瀵箂vg鍐呭杩涜鎵撳寘娓叉煋Step4锛氬皝瑁卾ue缁勪欢骞跺叏灞€娉ㄥ唽Step5锛氬湪椤甸潰涓簲鐢ㄤ紶鍊糞tep1锛氬垱寤烘墍闇€鏂囦欢棣栧厛鍦╯rc鏂囦欢澶逛笅鍒涘缓濡備笅鏂囦欢锛氱洰褰曟枃浠惰鏄巗vgIcon/index.vue灏佽缁勪欢svg鐩綍瀛樻斁浣犵殑svg鏍煎紡鏂囦欢index.js鍏ㄥ眬娉ㄥ唽svghooksvgTagView.jssvg鎻掍欢绗簩姝ワ細灏佽锛堣浆鎹㈠拰璇诲彇svg锛夋枃浠剁殑鎻掍欢1.棣栧厛寮曞叆鑺傜偣svgTagView.js涓殑鏂囦欢绯荤粺锛屽苟鍦╲ite:synchronousreaddir()涓娇鐢╥mport{readFileSync,readdirSync}from'fs'readdirSync銆俽eturnfilearraylistreadFileSync锛氬悓姝ヨ鍙栨枃浠跺唴瀹癸紝涓嶇煡閬撹妭鐐筬s鏂囦欢鐨勭郴缁熸湅鍙嬭鐐瑰嚮浼犻€侀棬锛屽湪vite.config.js涓殑plugins涓娇鐢╥mport{svgTagView}from'./src/icons/svgTagView.js'plugins:[vue(),svgTagView()]2.璁剧疆svg鐨勬鍒欏尮閰嶆爣绛惧拰灞炴€onstattributeMatch={svgTag:/+].*?)>/,//鍖归厤澶氫釜{璁╁搴?0璁╅珮搴?0璁╁唴瀹?$2.replace(attributeMatch.clearWidthHeight,(s1,s2,s3)=>{if(s2==='width'){width=s3}elseif(s2==='height'){浠杋ght=s3}return''})if(!attributeMatch.hasViewBox.test($2)){content+=`viewBox="00${width}${height}"`}return``}).replace('','')svgRes.push(svg)}}console.log(svgRes)returnsvgRes}杩愯杩欐浠ｇ爜锛屽彲浠ュ湪缁堢鐪嬪埌濡備笅淇℃伅锛氱浜屾瀹屾垚灏辩畻绗笁姝ュ畬鎴愪簡锛氫娇鐢╲itetransformIndexHtml娓叉煋svgcontent涓婇潰绗簩姝ヤ腑svg鐨勫唴瀹癸紝鐜板湪鎴戜滑瑕佸皢杩欎簺鍐呭娓叉煋鍒皏iew涓紝閭ｄ箞灏辩敤vite鐨則ransformIndexHtml1銆傝В閲妕ransformIndexHtml锛歵ransformIndexHtml鏄竴涓壒娈婄殑閽╁瓙锛岀敤浜庤浆鎹ndex.html閽╁瓙鎺ユ敹褰撳墠鐨凥TML瀛楃涓插拰杞崲涓婁笅鏂囥€備笂涓嬫枃鍦ㄥ紑鍙戞湡闂村叕寮€ViteDevServer瀹炰緥锛屽湪鏋勫缓鏈熼棿鍏紑Rollup杈撳嚭鐨勫寘銆傝繖涓挬瀛愬彲浠ユ槸寮傛鐨勶紝骞朵笖鍙互杩斿洖浠ヤ笅涔嬩竴锛氫竴涓爣绛炬弿杩扮瀵光€嬧€嬭薄鏁扮粍锛坽tag,attrs,children}锛夌敤杞崲鍚庣殑HTML瀛楃涓叉敞鍏ュ埌鐜版湁鐨凥TML涓€傛瘡涓爣绛捐繕鍙互鎸囧畾搴旇鍦ㄤ綍澶勬敞鍏ワ紙榛樿鍦?head>涔嬪墠锛変竴涓寘鍚珄html,tags}鏁扮粍鍐呭鐨勫璞℃斁鍦╯vg鏍囧噯Standardsvg鏍囩瀹氫箟鐨勬爣绛句腑锛?svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"style="position:absolute;width:0;height:0">瀹炴柦锛歝onstsvgTagView=(path='./src/icons/svg/',perfect='icon')=>{if(path==='')returnidPerfix=perfixconstres=recursivelyFindSvg(path)return{name:'svg-transform',transformIndexHtml(html){//transformIndexHtml鏄浆鎹ndex.html鐨勪笓鐢╤ook锛寁ite3鐙湁returnhtml.replace('',`${res.join('')}`)}}}灏辩畻杩欓噷鎵撳寘浜嗘彃浠讹紝閭ｆ垜鎴戜滑闇€瑕佸皢svg璺緞鍐欏叆vite.config.js杩涜鍏ㄥ眬閰嶇疆svgTagView('./src/icons/svg/')闄勪笂瀹屾暣浠ｇ爜濡備笅锛歩mport{readFileSync,readdirSync}from'fs'constattributeMatch={svgTag:/+].*?)>/,clearWidthHeight:/(width|height)="([^>+].*?)"/g,hasViewBox:/(viewBox="[^>+].*?")/g,clearReturn:/(\r)|(\n)/g}letidPerfix=''閫掑綊鍑芥暟FindSvg(dir){constsvgRes=[]constdirents=readdirSync(dir,{withFileTypes:true//灏嗘枃浠朵綔涓篺s.Dirent瀵硅薄杩斿洖锛?/fs.Dirent鏄洰褰曢」锛堝彲浠ユ槸鏂囦欢涔熷彲浠ユ槸鐩綍涓殑瀛愮洰褰曪級鐨勮〃绀猴紝璇诲彇fs杩斿洖鐨勭洰褰曢」.Dir鏄枃浠跺悕鍜屾枃浠剁被鍨嬪鐨勭粍鍚堛€倉)//console.log(dirents)//{name:'guanyuwomeng1.svg',[Symbol(type)]:1}for(constdirentofdirents){if(dirent.isDirectory()){//鍒ゆ柇鏄笉鏄洰褰晄vgRes.push(...recursivelyFindSvg(dir+dirent.name+'/'))//閫掑綊鑾峰彇svg鏂囦欢鐨勫唴瀹箎else{//璇诲彇鏂囦欢淇℃伅锛屼娇鐢╮epalce鏂规硶浣跨敤绗竴姝ユ鍒欏尮閰嶈浆鎹vg鏂囦欢constsvg=readFileSync(dir+dirent.name).toString().replace(attributeMatch.clearReturn,'').replace(attributeMatch.svgTag,($1,$2)=>{璁╁搴?0璁╅珮搴?0璁╁唴瀹?$2.replace(attributeMatch.clearWidthHeight,(s1,s2,s3)=>{if(s2==='width'){width=s3}elseif(s2==='height'){height=s3}return''})if(!attributeMatch.hasViewBox.test($2)){content+=`viewBox="00${width}${height}"`}return``}).replace('','')svgRes.push(svg)}}//鎺у埗鍙?log("馃殌~file:svgTagView.js:28~recursivelyFindSvg~svgRes",svgRes)returnsvgRes}exportconstsvgTagView=(path,perfix='icon')=>{if(path==='')杩斿洖idPerfix=perfixconstres=recursivelyFindSvg(path)return{name:'svg-transform',transformIndexHtml(html){//transformIndexHtml鏄竴涓浆鎹ndex.html鐨勭壒娈奾ook锛寁ite3鐙湁returnhtml.replace('',`${res.join('')}`)}}}鎻掍欢鎵撳寘瀹屾垚锛屾帴涓嬫潵灏辨槸鎵撳寘svgvue缁勪欢杩涜娓叉煋鍜岀‘璁や竴涓嬬鍥涙锛氬皝瑁卾ue缁勪欢骞跺叏灞€娉ㄥ唽鎵撳紑鎴戜滑鏂板缓鐨勭涓€涓枃浠禼omponents/SvgIcon/index.vue1.灏佽涓€涓叏灞€閫氱敤鐨剆vg-icon缁勪欢濡備笅锛氬彲浠ヨ嚜宸遍厤缃畇vg鏍囩鍙互鏈夌殑灞炴€э紙width銆乧lass銆乶ame绛?..锛夛紝灏佽璇硶寰堢畝鍗曪紝杩欓噷涓嶅啀璧樿堪2.鍏ㄥ眬娉ㄥ唽涓婁竴姝ュ皝瑁呯殑svg-icon锛屾墦寮€绗竴涓柊寤虹殑icons/idnex.js锛屼娇鐢╥nstall閽╁瓙灏嗗叾娉ㄥ唽鍒皏ue瀹炰緥涓婏紝濡備笅锛歩mportSvgIconfrom'@/components/SvgIcon/index.vue'exportdefault{install:(app)=>{app.component('svg-icon',SvgIcon)}}鐒跺悗鍦ㄥ叆鍙ｆ枃浠朵腑浣跨敤main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importSvgIconfrom'./icons/index'constapp=createApp(App)app.use(SvgIcon)app.mount('#app')鍏ㄥ眬娉ㄥ唽浣跨敤瀹屾垚锛屼笅涓€姝ユ垜浠湪妯℃澘涓娇鐢ㄥ畠()绗簲姝ワ細灏?svg-icon/>缁勪欢搴旂敤鍒伴〉闈腑浼犻€掑€?template>