当前位置: 首页 > Web前端 > vue.js

开发日记(04)——iconfont挂了,项目中的图标怎么办?

时间:2023-04-01 12:48:40 vue.js

/*#ifndefAPP-NVUE*/@import'./style.css';/*#endif*/.icomoon{font-family:icomoon;}馃搶0x1闂iconfont搴旇鍋滄湇1-2涓湀浜嗭紝涓嶇鏄粈涔堝師鍥狅紝鑲畾浼氭湁寰堝椤圭洰鐨勫浘鏍囦竴鏃跺崐浼氬嚭涓嶆潵銆備綔涓轰竴鍚嶅紑鍙戜汉鍛橈紝鎴戜竴鐩磋寰楀湪绾挎湇鍔′笉鍙潬銆傞」鐩腑绗笁鏂规湇鍔¤秺澶氾紝涓嶅彲鎺у洜绱犲氨瓒婂銆傚鏋滈兘鍦ㄦ垜鑷繁鐨勬湇鍔″櫒涓婏紝鑷冲皯鎴戝彲浠ユ帶鍒舵湇鍔$殑鍚姩鍜屽叧闂€傞兘鏄悓鏃剁殑锛岃€屼笖涓嶄細鍑虹幇鑳界敤锛屼絾鍙堟病鏈夊畬鍏ㄧ敤瀹岀殑鐘舵€侊紝姣旀湇鍔℃寕浜嗚繕鎭跺績銆侼ode鍒涘浜哄垱寤虹殑鏂癲eno涔熸敮鎸佸紩鍏ュ湪绾胯剼鏈€傜涓€娆$湅鍒拌繖娈典唬鐮佸彲浠ヨ繖鏍峰啓銆傛垜鐨勭涓€鎰熻鏄紝鏈変竴澶╄繖娈典唬鐮佸彲鑳戒細鎸傛帀锛屽鑷存暣涓」鐩穿婧冦€備笉鏉ヤ簡銆俰mport{VERSION}from'https://deno.land/std/version.ts'console.log(VERSION)馃搶0x2鎯宠鐨勬晥鏋滄槸鍥犱负鏄痷ni-app寮€鍙戠殑椤圭洰锛岄渶瑕佸吋瀹筧pp鍜宯vue銆傛墍浠ュ浘鏍囧彧鑳戒娇鐢ㄥ崟鑹插瓧浣撳浘鏍囩殑褰㈠紡锛屼笉鑳界洿鎺ヤ娇鐢╯vg鐨勫舰寮忋€傛湰鍦板鍏ワ紝涓嶄緷璧栦换浣曠涓夋柟鏀寔銆俉eex鐨刵vue鎺ュ彛鍏煎h5鍜宎pp鏄剧ず缁勪欢銆傚氨鏄娇鐢ㄦ湰鍦板鍏ョ殑鏂规硶銆傚綋鍓嶇殑iconfont鏃犳硶浣跨敤锛屾棤娉曚笂浼犳垨涓嬭浇銆傜湅鐪嬫槸鍚︽湁浠讳綍鍏朵粬鏂规硶鍙互灏唖vg杞崲涓哄瓧浣撳浘鏍囥€俫ithub涓婃湁鐩稿綋澶氱殑搴撳彲浠ュ皢svg杞崲涓簑ebfont銆俿vg2ttfsvgtofont鎴戝皾璇曚笅杞戒簡鍑犱釜娴嬭瘯锛屽彂鐜版湁涓€涓棶棰橈紝灏辨槸濡傛灉鎴戠敤杩欎簺宸ュ叿杞崲MasterGo瀵煎嚭鐨剆vg鍥炬爣锛屽湪椤圭洰涓娇鐢ㄦ椂鎬绘槸榛戣壊鐨勩€傜寽鐚渟vg闇€瑕佷竴浜涘鐞嗐€傚洜涓烘垜浠巌confont涓嬭浇浜嗕竴涓猻vg锛屾墍浠ュ彲浠ヨ浆鎹㈠畠銆傝繖閲屽氨涓嶈浜嗭紝涔熶笉鏄垜鎿呴暱鐨勬柟鍚戙€傛兂鐭ラ亾iconfont鏄共浠€涔堢殑鍙互鐪嬭繖绡噄confont瀛椾綋鐢熸垚鍘熺悊鍜屼娇鐢ㄦ妧宸э紝姣旇緝璇︾粏銆傚叾瀹炲瓧浣撳浘鏍囧鐞嗛噷闈㈡湁寰堝瀛﹂棶銆傚浘鏍囧緢灏忥紝浣嗘槸鍙互鍋氱殑浜嬫儏寰堝銆傪煋?x4icomoonsvg澶勭悊杩欐槸涓€涓被浼糹confont鐨勫钩鍙般€傜己鐐规槸鍙兘鍦ㄦ湰鍦扮淮鎶ゃ€傛墍鏈夋暟鎹兘琚紦瀛樸€傚鏋滄祻瑙堝櫒缂撳瓨鏁版嵁琚竻闄わ紝瀹冧細琚竻闄ゃ€備絾鏄繖涓敮鎸佹垜鐩存帴浠庤璁″浘瀵煎嚭鏉ュ姞宸ョ殑svg銆傝繖閲岀敤MasterGo婕旂ず鐨勫叾瀹炲氨鏄幏鍙杝vg鍥炬爣鐨勮繃绋嬨€?x1鏂囦欢閲嶅懡鍚嶉鍏堣ui鏁寸悊涓€涓嬮」鐩腑鐢ㄥ埌鐨勫浘鏍囷紝濂藉ソ鍛藉悕銆傚厑璁告垜鐩存帴瀵煎嚭涓簊vg銆?x2涓婁紶鍒癷comoon鑾峰彇瀵煎嚭鐨剆vg鍥炬爣锛屼笂浼犲埌icomoon銆傜偣鍑籭comoonapp杩涘叆icomoonimportsvgicon閫夋嫨MasterGo瀵煎嚭鐨勫浘鏍囷紝涓婁紶閫夋嫨鎵€鏈夊浘鏍囩偣鍑籫eneratefont鐐瑰嚮preset璁剧疆涓篶lassselector锛屽彇娑堝ie8鐨勬敮鎸侊紝鐐瑰嚮download涓嬭浇瀛椾綋鍖?x3寰楀埌瀵煎嚭鏂囦欢鐪嬭捣鏉ュ拰iconfont瀵煎嚭鐨勬病浠€涔堝尯鍒€傪煋?x5鍥炬爣缁勪欢c-icon-moon.vue鏄竴涓櫘閫氱殑vue缁勪欢锛岄噷闈㈢殑#ifdef鏄痷ni-app鐨勬潯浠剁紪璇戙€備负浜嗗吋瀹瑰骞冲彴锛岄渶瑕佹潯浠剁紪璇戙€?template>{{icons[name]}}/*#ifndefAPP-NVUE*/@import'./style.css';/*#endif*/.icomoon{font-family:icomoon;}addUnit鏂规硶//娣诲姞鍗曞厓锛屽鏋滄湁rpx,%,px绛夊崟浣嶇粨鏉熸垨鑰呭€间负auto锛岀洿鎺ヨ繑鍥烇紝鍚﹀垯娣诲姞rpx鍗曚綅缁撴潫瀵煎嚭鍑芥暟addUnit(value='auto',rpx=false){value=String(value)杩斿洖isNumber(value)锛焋${鍊紏${rpx锛?rpx':'px'}`:value}/***楠岃瘉鍗佽繘鍒舵暟*/瀵煎嚭鍑芥暟isNumber(value){return/^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)}icomoon-ttf-base64闇€瑕佸皢fonts/icomoon.ttf鏂囦欢杞垚base64鎵嶈兘鍏煎鐢╪vue鍐欏叆鏂囦欢杞崲缃戝潃锛歨ttps://www.giftofspeed.com/base64-encoder/exportdefault'AAEAAAALAIAAAwAw...`icomoon.wofficons.js鍦ㄨ繖閲岄厤缃畁vue闇€瑕佺殑鍥炬爣鍚嶇О鏄剧ず\ue912绫讳技鐨勫瓧绗﹀彲浠ュ湪style.css涓墦寮€锛屾壘鍒颁綘闇€瑕佸湪nvue涓婃樉绀虹殑鍥炬爣鍚嶇О锛屽鍒跺嵆鍙€?***杩欓噷閰嶇疆nvue涓婇渶瑕佹樉绀虹殑鍥炬爣*/exportdefault{//Fingerprint'icomoon-fingerprint':'\ue912',}nvue-helpernvue闇€瑕佸垵濮嬪寲閰嶇疆銆俰mporticomoonTtfBase64from'./icomoon-ttf-base64'/***iconfont闇€瑕佷娇鐢╰tf杞琤ase64*杞崲URL:https://www.giftofspeed.com/base64-encoder/*/exportfunctiononInitNvueFontIcon(){constdom=uni.requireNativePlugin('dom')dom.addRule('fontFace',{fontFamily:'icomoon',src:`url('data:font/truetype;charset=utf-8;base64,${icomoonTtfBase64}')`,})}style.css鍒犻櫎涓嶅繀瑕佺殑鏍煎紡锛屽彧鐣欎笅src:url('icomoon.woff')format('woff');杩欎竴娈靛氨鍙互浜嗐€侤font-face{瀛椾綋绯诲垪锛歩comoon锛涘瓧浣撴牱寮忥細姝e父锛涘瓧浣撶矖缁嗭細姝e父锛涘瓧浣撴樉绀猴細鍧楋紱src:url('icomoon.woff')鏍煎紡('woff');}.icomoon{font-family:icomoon!important;/*鏇村ソ鐨勫瓧浣撴覆鏌?===========*/-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing锛氱伆搴︼紱瀛椾綋鏍峰紡锛氭甯革紱瀛椾綋鍙樹綋锛氭甯革紱瀛椾綋绮楃粏锛氭甯革紱琛岄珮锛?锛泃ext-transform:none;}.icomoon-add::before{content:'\e900';}/*...*/馃搶0x6浣跨敤vue鎺ュ彛鐩存帴鍙傝€冪粍浠朵娇鐢ㄧず渚嬨€俷vue鎺ュ彛nvue鎺ュ彛闇€瑕佸鍏ュ瓧浣撴枃浠讹紝鍏ㄥ眬鍙渶瑕佸鍏ヤ竴娆pp.vue缁勪欢浣跨敤绀轰緥鍏跺疄灏辨槸vue缁勪欢鐨勪娇鐢ㄣ€傛澶勫彂甯冧簡涓€涓ず渚嬨€?c-icon-moonsize="60"name="icomoon-fingerprint"color="red"/>鏄剧ず鏁堟灉馃搶iconfont姝e悕杩欓噷鏄痠confont姝e悕锛屽厛鐪嬬湅缃戝弸浠殑蹇冩儏https锛?/github.com/thx/iconfont-plus/issues闃块噷澶э紝浣嗕笉鏄墍鏈夐儴闂ㄩ兘澶с€傚唴閮ㄦ湁棰勭畻鍒嗛厤銆備粬浠槸浼佷笟锛屼笉鏄厛鍠勬満鏋勩€傝嚜浠庣敤浜唅confont骞冲彴锛屽氨涓€鐩村厤璐瑰崠娣€傚噯纭殑璇达紝濂藉儚娌℃湁浠樿垂椤圭洰銆傛垜浠潵鐪嬬湅浠婂ぉ浣跨敤鐨刬comoon骞冲彴璁㈤槄璐广€傚綋鐒讹紝涓句釜渚嬪瓙锛屾湁澶氬皯鍏徃鎰挎剰涓篿con鍑鸿繖鏍风殑棰勭畻锛熻瘎璁哄尯鏄粰澶у鐨勩€傪煋斿紑鍙戞棩蹇楃郴鍒楀彧璁板綍涓€浜涘钩鏃跺寮€鍙戞湁鐢ㄧ殑涓滆タ銆傝鏇存浠讳綍闂锛岃銆備换鍔¢槦鍒楀紑鍙戞棩璁帮紙03锛?uni-app鎵撳寘涓篴pp寮€鍙戞棩璁帮紙04锛?iconfont鎸備簡锛岄」鐩腑鐨勫浘鏍囨€庝箞鍔烇紵鍏充簬鎴慡unSeekerX锛屽叏鏍堝紑鍙戯紝鍖哄潡閾惧紑鍙戯紝绉诲姩寮€鍙戯紝鍓嶅悗绔紑鍙戯紝NodeJS寮€鍙戯紝灏忕▼搴忥紝uni-app寮€鍙戠瓑銆傚枩娆㈣璁烘妧鏈疄鐜版柟妗堝拰缁嗚妭锛屽畬缇庝富涔夎€咃紝鍜屾病鏈夐敊璇€侴ithub锛歨ttps://github.com/SunSeekerX涓汉鍗氬锛歨ttps://yoouu.cn/涓汉鍦ㄧ嚎绗旇锛歨ttps://doc.yoouu.cn/