锛熷鏋滃鎮ㄦ湁甯姪锛岃鐐硅禐馃憤鏀惰棌鏀寔銆傛渶杩戝湪閲嶆瀯涓€涓」鐩紝涓昏閽堝H5绔拰灏忕▼搴忕銆傝繖娆℃墦绠楀紑濮嬪鎬荤粨銆傛垜宸茬粡鎬荤粨浜嗕竴绡囨枃绔犮€婂浣曚紭闆呯殑绠＄悊 HTTP 璇锋眰鍜屽搷搴旀嫤鎴櫒锛熴€嬨€傚鏋滄湁鍏朵粬鐨勬柟妗堬紝娆㈣繋涓€璧疯璁簙鍠滄鏈枃鐨勬湅鍙嬬粰涓禐馃憤榧撳姳~1.闇€姹傛€濈淮涓庢柟妗堣璁℃湰鏂囦粙缁嶇殑椤圭洰鏄娇鐢═aro妗嗘灦杩涜澶氱寮€鍙戙€傜洰鍓嶄富瑕侀€傞厤H5绔拰寰俊灏忕▼搴忋€傞」鐩娇鐢ㄧ殑瀛椾綋鍥炬爣搴撴槸鍐呴儴缁存姢鐨勶紝鐩墠鎵樼鍦╥confont涓娿€?.闂鍒嗘瀽鏈€杩戦噸鏋勭殑椤圭洰姣旇緝鑰侊紙鍏跺疄鏄幓骞达級锛岄」鐩腑浣跨敤鐨勫浘鏍囧凡缁忔洿鏂颁簡N娆¤凯浠ｏ紝浠庡崟鑹插浘鏍囨洿鏂板埌澶氳壊鍥炬爣锛佹樉鐒舵洿濂界湅銆傝繖閲岋紝鎴戜滑鏍规嵁iconfont鐨勮鍒欙紝鐪嬩竴涓嬪崟鑹插浘鏍囧拰澶氳壊鍥炬爣鐨勫尯鍒細棣栧厛绗竴姝ワ細澶嶅埗椤圭洰涓嬬敓鎴愮殑fontclass浠ｇ爜锛?/at.alicdn.com/t/font_8d5l8fzk5b87iudi.css绗簩姝ワ細閫夋嫨瀵瑰簲鐨勫浘鏍囧苟鑾峰彇绫诲悕锛屽簲鐢ㄥ埌椤甸潰锛?iclass="iconfonticon-xxx">澶氳壊鍥炬爣鐨勪娇鐢ㄥ鑹插浘鏍囦娇鐢ㄨ捣鏉ヤ篃寰堢畝鍗曪紙浠ョ鍙峰紩鐢ㄤ负渚嬶級锛屽彧闇€瑕?姝ワ細绗竴姝ワ細澶嶅埗涓嬬敓鎴愮殑绗﹀彿浠ｇ爜椤圭洰锛?/at.alicdn.com/t/font_8d5l8fzk5b87iudi.js绗?姝ワ細娣诲姞閫氱敤css浠ｇ爜锛堝鍏ヤ竴娆★級锛?styletype="text/css">.icon{width:1em;楂樺害锛?em锛涘瀭鐩村榻愶細-0.15em锛涘～鍏咃細褰撳墠棰滆壊锛涙孩鍑猴細闅愯棌锛泒绗笁姝ワ細閫夋嫨瀵瑰簲鐨勫浘鏍囷紝鑾峰彇绫诲悕锛屽簲鐢ㄥ埌椤甸潰锛?svgclass="icon"aria-hidden="true">杩欎袱涓浘鏍囦娇鐢ㄨ捣鏉ラ潪甯告柟渚匡紝鎵€浠ュぇ瀹朵竴瀹氬緢濂藉鎴戜滑鍐欒繖绡囨枃绔犵殑鐩殑鏄粈涔堬紵鍘熷洜鏄井淇″皬绋嬪簭涓嶆敮鎸丼VG瀛椾綋鍥炬爣锛侌煒斿鑹插浘鏍囬渶瑕佸€熷姪SVG鏍囩鏉ュ疄鐜般€備簬鏄湪灏忕▼搴忔枃妗ｉ噷鎵句簡鍗婂ぉ锛屽彧鐪嬪埌缁勪欢鍙互浣跨敤SVG锛屼粙缁嶅涓嬶細image鍥剧墖銆傛敮鎸丣PG銆丳NG銆丼VG銆乄EBP銆丟IF绛夋牸寮忥紝浠?.3.0寮€濮嬫敮鎸佷簯鏂囦欢ID銆傚畠鐨勫睘鎬rc鐨勫€间负鍥剧墖璧勬簮鍦板潃锛屼篃灏辨槸璇翠笉鑳戒娇鐢⊿VG瀛椾綋鍥炬爣銆傛墍浠ユ垜浠渶瑕佽€冭檻鍙橀€氬姙娉曘€傦紙灏唅confont涓婄殑鍥炬爣涓嬭浇涓哄浘鐗囩殑鎯呭喌杩欓噷涓嶈璁猴級浜屻€佹柟妗堣璁′簡瑙ｄ簡鍗曡壊鍥炬爣鍜屽鑹插浘鏍囩殑鐢ㄦ硶鍚庯細鍗曡壊鍥炬爣锛氫换鎰忔爣绛撅紙濡俤iv鏍囩锛?瀵瑰簲鐨勫瓧浣撳浘鏍囧甫绫诲悕鐨勫鑹插浘鏍囷細浣跨敤svg鏍囩+use鏍囩璁剧疆xlink:href灞炴€ч鍏堟兂鍒扮殑鏄槸鍚﹀彲浠ュ皢涓ょ浣跨敤鏂瑰紡缁撳悎璧锋潵锛岃浠讳綍鏍囩閮藉彲浠ヤ娇鐢ㄥ鑹查€氳繃绫诲悕鐨勯鑹插浘鏍囷紵绛旀鏄彲浠ョ殑锛屽彧闇€瑕佽浆鎹㈠浘鏍囨枃浠剁殑鏍煎紡鍗冲彲锛屽嵆灏嗗鑹插瓧浣撳浘鏍囪浆鎹㈡垚绫诲悕鍙互寮曠敤鐨勫瓧浣撳浘鏍囨枃浠躲€傞偅涔堝氨鐪嬬湅濡備綍瀹炵幇鏍煎紡杞崲鍚с€?銆侀噸鏋勫悗鐨勬晥鏋滆繖閲屾垜瀵瑰叾涓竴涓〉闈㈣繘琛屼簡閲嶆瀯锛屾渶鍚庡皢鎵€鏈夌殑鍗曡壊鍥炬爣鏇挎崲涓烘柊鐨勫鑹睸VG瀛椾綋鍥炬爣銆備袱濂楁柟妗堬紝閮芥垚鍔熻揪鍒颁簡鏁堟灉銆傝繖閲屾垜鍏堝垎浜繖涓ょ鏂规锛岀劧鍚庤ˉ鍏呬竴涓嬫垜閫夋嫨鍝鏂规锛屼负浠€涔堬細杩欎釜鏂规鏄皢瀛椾綋鍥炬爣搴撴枃浠舵墜鍔ㄨ浆鎹㈡垚绫诲悕鍥炬爣搴撳彲浠ュ紩鐢ㄧ殑鏂规銆備娇鐢ㄧ殑宸ュ叿鏈夛細icomoon锛歨ttps://icomoon.io/鐢ㄤ簬鎵撳寘鍥炬爣銆倀ransfonter锛歨ttps://transfonter.org/鐢ㄤ簬鐢熸垚base64鏍煎紡鐨勫浘鏍囥€傛帴涓嬫潵璇曡瘯鐪嬶細绗竴姝ワ細閫氳繃iconfont涓嬭浇闇€瑕佺殑SVG鏍煎紡鐨勫浘鏍囥€傝繖閲屼綘鍙堜笅杞戒簡鍑犱釜svg鏍煎紡鐨勬枃浠讹紝濡備笅鍥撅細Step2:鎵撳寘瀛椾綋鍥炬爣銆係VG澶氳壊鍥炬爣琚墦鍖呮垚涓€涓瓧浣撳浘鏍囨枃浠躲€傝繖涓€姝ラ渶瑕佺敤鍒癶ttps://icomoon.io/锛氱涓夋锛氬瓧浣撳浘鏍囩殑Base64缂栫爜鎺ヤ笅鏉ラ渶瑕佸鎵撳嵃鍑烘潵鐨勫瓧浣撳浘鏍囪繘琛宐ase64鍘嬬缉锛岃繖閲屼娇鐢╤ttps://transfonter.org/杩涜鎿嶄綔銆傜涓€姝ワ紝閫夋嫨涔嬪墠鎵撳寘濂界殑.ttf鏂囦欢锛氳缃弬鏁帮紝瀵煎嚭鏂囦欢锛氱鍥涙锛氬悎骞跺瓧浣撳浘鏍囩粡杩囧墠闈㈢殑姝ラ锛屾垜浠幇鍦ㄦ湁2涓寘锛氱涓€涓寘锛歩comoon鐢熸垚鎵撳寘绗簩涓猵ackage锛歵ransfonter鐢熸垚鐨勫寘鎺ヤ笅鏉ワ紝鎴戜滑寮€濮嬪悎骞朵袱涓寘锛氬皢绗竴涓寘style.css鏂囦欢涓櫎浜咢font-face鐨勫唴瀹瑰鍒跺埌绗簩涓寘stylesheet.css鏂囦欢涓€傝繖鏍峰氨寰楀埌浜嗕竴涓柊鐨勫瓧浣撳浘鏍囨枃浠讹紝涔熷彲浠ュ鍒跺埌涓€涓柊鐨刢ss鏂囦欢涓€備娇鐢ㄥ瓧浣撳浘鏍囨垜浠皢涔嬪墠淇敼杩囩殑鏂囦欢閲嶅懡鍚嶄负icon.scss锛屽鍏ュ埌椤圭洰涓細//app.scss@import"./style/icon.scss";鍦ㄤ唬鐮佷腑浣跨敤鍥炬爣锛?ViewclassName="icon-exe-knowledge-ppt">鏈€鍚庣殑鏁堟灉鏄涓嬶細浣跨敤绗竴绉嶆柟妗堟椂锛岃俯鍧戣褰曡俯浜嗗ソ鍑犱釜杩欓噷鏈変袱涓潙锛氫娇鐢ㄦ椂闇€瑕佹墜鍔ㄦ坊鍔犲嚑涓?Viewclassname="path*">鍏冪礌.鍒氬紑濮嬩娇鐢ㄧ殑鏃跺€欙紝鍥炬爣杩樻病鏈夊嚭鏉ャ€傚悗闈㈣瀵熷瓧浣撳浘鏍囷紝鏄湪container:鍏冪礌涓嬬殑寰堝path1銆乸ath2绛夊厓绱犵殑浼被涓覆鏌撶殑鍥炬爣鍐呭锛屾墍浠ヤ娇鐢ㄧ殑鏃跺€欓渶瑕佹墜鍔ㄦ坊鍔犮€傞粯璁ゅ浘鏍囦細鏄竴涓緢澶х殑鍧楃骇鍏冪礌锛屽鑷村浘鏍囨樉绀哄嚭鐜伴棶棰樸€傝繖鏄洜涓烘墜鍔ㄦ坊鍔犵殑甯︽湁classpath*鐨刅iew鏍囩鏄潡绾у厓绱狅紝鎵€浠ヨ繖閲岀洿鎺ユ坊鍔燿isplay:flex鍗冲彲銆傚苟涓斿畠鐨勫瓧浣撳ぇ灏忎篃鍙互浣跨敤font-size鏉ヨ缃細display:flex;font-size:100px;鎻愬彇缁勪欢鑰冭檻鍒板彲閲嶇敤鎬э紝鎴戝皢鎶婂畠浠彁鍙栧埌涓€涓猠xe-svg-icon缁勪欢涓細functionEXESvgIcon(params){const{icon='exe-none'}=params;constcontainerStyle={display:'inline-block'}return({/*涓€鑸浘鏍囨湁3灞傦紝杩樻湁鍑犲眰姝ゅ淇濈暀鍥惧眰浠ラ槻姝娇鐢ㄤ笉瓒?/})}exportdefaultEXESvgIcon;鍦ㄦ锛屾柟妗?.瀹屾垚4.鏂规2锛氬€熷姪绗笁鏂瑰簱瀹炵幇鐢变簬绗竴绉嶆柟妗堜娇鐢ㄨ捣鏉ユ瘮杈冮夯鐑︼紝鎴戜細鐮旂┒鍏朵粬鏇寸畝鍗曠殑鏂规銆傜洿鍒版垜鐪嬪埌taro-iconfont-cli搴撱€備娇鐢═aro妗嗘灦涓殑iconfont鍥炬爣锛屼笉渚濊禆瀛椾綋锛屾敮鎸佸绉嶉鑹层€傜洰鍓嶆敮鎸佺殑骞冲彴鏈夛細寰俊灏忕▼搴忋€佹敮浠樺疂灏忕▼搴忋€佺櫨搴﹀皬绋嬪簭浠婃棩澶存潯灏忕▼搴忋€丵Q灏忕▼搴廐5鍏锋湁浠ヤ笅鐗圭偣锛氫竴閿敓鎴愭爣鍑嗙粍浠讹紝澶氱粓绔敮鎸侊紝绠€鍗曟槗鐢紝瀵煎叆鍙敮鎸佸绉嶉鑹诧紝鏀寔鑷畾涔夐鑹?鏀寔ES6鍜孴ypeScript鏂囨。涓弿杩颁簡杩欎袱绉嶆ā寮忥紝鍙渶瑕?姝ワ紝涓嶅Θ璇曡瘯鐪嬶細绗竴姝ワ細瀹夎taro-iconfont-cli#Yarnyarnaddtaro-iconfont-cli--dev#npmnpminstalltaro-iconfont-cli--save-dev闇€瑕佹敞鎰忕殑鏄紝濡傛灉鎮ㄤ娇鐢ㄧ殑鏄疶aro2.x锛岃瀹夎**taro-iconfont-cli@2.1.0**骞堕槄璇绘棫鐗堟湰鐨凴EADME.md銆傜浜屾锛氱敓鎴愰厤缃枃浠堕€氳繃鍛戒护鐢熸垚iconfont.json閰嶇疆鏂囦欢锛歯pxiconfont-init#鍙互浼犲叆閰嶇疆杈撳嚭璺緞#npxiconfont-init--outputiconfont.json杩欐椂鍊欎細鐢熸垚涓€涓猧confont.json鏂囦欢浼氬湪椤圭洰鏍圭洰褰曚笅鐢熸垚锛屽唴瀹瑰涓嬶細{"symbol_url":"璇峰弬鑰僐EADME.md骞跺鍒秇ttp://iconfont.cn瀹樼綉鎻愪緵鐨凧S閾炬帴","save_dir"锛氣€?/src/components/iconfont鈥濓紝鈥渦se_typescript鈥濓細false锛屸€減latforms鈥濓細鈥?鈥濓紝鈥渦se_rpx鈥濓細true锛屸€渢rim_icon_prefix鈥濓細鈥渋con鈥濓紝鈥渄efault_icon_size鈥濓細18锛屸€渄esign_width鈥濓細750}symbol_url鐨勫€奸渶瑕佸湪iconfont涓鍒剁涓夋锛氱敓鎴怲aro鏍囧噯缁勪欢鍛戒护鐢熸垚Taro鏍囧噯缁勪欢锛歯pxiconfont-taro#鍙互浼犲叆閰嶇疆鏂囦欢璺緞#npxiconfont-taro--configiconfont.json閫氳繃鎺у埗鍙帮紝鎴戜滑鍙互鐪嬪埌taro-iconfont-cli涓烘瘡涓浘鏍囩敓鎴愪簡涓€涓猅aro缁勪欢锛氭牴鎹枃妗ｄ腑鐨勪娇鐢ㄦ柟娉曘€備娇鐢ㄦ椂锛屽彧闇€瑕佸鍏conFont缁勪欢锛岄€氳繃鍚嶇Оname閫夋嫨瀵瑰簲鐨勫浘鏍囧嵆鍙細//鐪佺暐鍏朵粬浠ｇ爜importIconFontfrom'@components/Iconfont/index';鏍规嵁鏂囨。锛岃繕鏈夋洿澶氱殑浣跨敤鏂瑰紡锛?/鍘熻壊//鍗曡壊锛氱孩鑹?IconFontname="alipay"color="red"/>//澶氳壊锛氱孩鑹?姗欒壊//涓嶅悓鏍煎紡鐨勯鑹蹭功鍐?IconFontname="alipay"color={['#333','rgb(50,124,39)']}/>//涓庢枃瀛楀榻?Viewstyle={{display:'flex',alignItems:'center'}}>浣犲ソ韪╁潙璁板綍瀛椾綋澶у皬璁剧疆闂鐢变簬杩欑鏂瑰紡瀵煎嚭鐨勫浘鏍囨槸涓€涓崟鐙殑缁勪欢锛屽鏋滈渶瑕佽缃娇鐢ㄦ椂鍥炬爣鐨勫ぇ灏忥紝闇€瑕侀€氳繃璁剧疆瀹冪殑width鍜宧eight灞炴€ф潵璁剧疆銆傚瓧浣撳浘鏍囩殑澶у皬涓嶈兘閫氳繃font-size灞炴€ц缃€備簲銆佹柟妗堟瘮閫夋湰娆″彧灏濊瘯浜嗚繖涓ょ鏂规锛屽潎鑳介『鍒╂弧瓒宠姹傘€傚鏋滃ぇ瀹舵湁鍏朵粬鐨勮В鍐虫柟妗堬紝娆㈣繋鍦ㄨ瘎璁哄尯璁ㄨ~涓嬮潰鎴戜滑灏卞熀浜庡悓鏍风殑20涓鑹插浘鏍囨潵鍒嗘瀽涓€涓嬭繖涓ょ鏂规锛氬厛鏉ョ湅鐪嬪姣旂粨鏋滐細鎵嬪姩杞崲鍥炬爣鏂囦欢涓簍aro-iconfont-cli搴撶殑甯姪鐢熸垚闅惧害澶嶆潅绠€鍗曚娇鐢ㄩ毦搴︾畝鍗曠畝鍗曡祫婧愬崰鐢?7kb420kb锛堥」鐩墦鍖呭墠锛夊垎鏋愭瘡涓」鐩細1.姣旇緝鐢熸垚闅惧害銆嬫墜鍔ㄢ€滆浆鎹㈠浘鏍囨枃浠垛€濋渶瑕佹瘡娆″崟鐙笅杞藉浘鏍囷紝鐒跺悗杩涜鎵撳寘锛屽綋鍥炬爣鏁伴噺杈冨鏃讹紝宸ヤ綔閲忚緝澶с€傘€妕aro-iconfont-cli銆嬪彧闇€瑕佽缃瓧浣撳浘鏍囧簱鍦板潃锛岃嚜鍔ㄤ笅杞界敓鎴愮粍浠讹紝鏇村姞鏂逛究銆?.鏄撶敤鎬ф瘮杈冧袱鑰呬娇鐢ㄨ捣鏉ラ兘姣旇緝绠€鍗曪細鈥滄墜鍔ㄨ浆鎹㈠浘鏍囨枃浠垛€濈粰鍏冪礌娣诲姞绫诲悕銆傗€渢aro-iconfont-cli鈥濆悜鍏冪礌娣诲姞鍚嶇О灞炴€с€?.姣旇緝璧勬簮鍗犵敤锛岃祫婧愬崰鐢ㄥ樊鍒緢澶с€傚垎鏋愪竴涓嬪師鍥狅細鈥滄墜鍔ㄨ浆鎹㈠浘鏍囨枃浠垛€濇槸灏嗗浘鏍囬噸鏂版墦鍖咃紝鏈€缁堢敓鎴愮殑鍐呭鏄痓ase64缂栫爜鐨勶紝姣旇緝灏戙€傗€渢aro-iconfont-cli鈥濅负姣忎釜鍥炬爣鐢熸垚涓€涓粍浠讹紝涓€涓崟鐙殑鏂囦欢锛屼互鍙婃瘡涓钩鍙扮殑闄勫姞鏂囦欢锛屾墍浠ユ瘮杈冨ぇ銆?銆侀€夋嫨鏂规鑰冭檻鍒扮洰鍓嶉」鐩腑浣跨敤鐨勫瓧浣撳浘鏍囨瘮杈冨皯锛堜笉鍒?0涓級锛屽悗缁紑鍙戣€呬笂鎵嬮毦搴﹀ぇ锛屾渶缁堥噰鐢ㄢ€渢aro-iconfont-cli鈥濇柟妗堛€傝鏂规鐢熸垚鐨勭粍浠惰櫧鐒惰祫婧愬崰鐢ㄤ細鐣ュぇ锛屼絾鐩墠浣跨敤鐨勫浘鏍囪緝灏戯紝鍙互閫氳繃鎵撳寘宸ュ叿銆丆DN绛夊父鐢ㄤ紭鍖栨墜娈佃繘琛屼紭鍖栥€?銆佹湰鏂囨€荤粨鏈枃閫氳繃涓€涓畝鍗曠殑椤圭洰閲嶆瀯锛屾€荤粨浜嗛」鐩腑灏忕▼搴忎腑浣跨敤SVG澶氳壊鍥炬爣鐨勬柟妗堛€傜珯鐐圭殑椤圭洰绉疮缁忛獙锛屾瘯绔熸瘡涓」鐩兘鏄浉鍏崇殑銆傛渶鍚庯紝鈥渢aro-iconfont-cli鈥濇柟妗堢洰鍓嶅湪npm鍐呴儴浠撳簱缁存姢锛屼娇鐢ㄧ増鏈帶鍒舵柟渚夸笉鍚岄」鐩娇鐢紝鍑忓皯鍐茬獊銆傚綋鐒讹紝杩欑瘒鏂囩珷鏄熀浜庢垜鐨勭粡楠屻€傛杩庡ぇ瀹舵湁鏇村ソ鐨勮В鍐虫柟妗堬紝涓€璧疯璁哄涔爚~鍙傝€冩枃绔犲井淇″皬绋嬪簭涓璼vg瀛椾綋鍥炬爣浣跨敤鏁欑▼鈥斺€斾笁姝ュ浘瑙ｏ紝闈炲父娓呮櫚鐨凾aro-Iconfont
