最近做一套跟華為生態(tài)相關(guān)的產(chǎn)品方案PPT里的架構(gòu)圖、網(wǎng)頁(yè)Demo的側(cè)邊欄、給客戶(hù)演示的原型都需要統(tǒng)一的視覺(jué)語(yǔ)言。配色倒是好說(shuō)真正難搞的是圖標(biāo)。以前我都是去各種圖標(biāo)站搜“華為風(fēng)格”搜出來(lái)的東西要么是第三方自制的風(fēng)格跟官方差著一截要么授權(quán)標(biāo)注不清用在商業(yè)項(xiàng)目里心里沒(méi)底。后來(lái)朋友提醒了一句華為官方有免費(fèi)圖標(biāo)庫(kù)2024年版已經(jīng)放出來(lái)了SVG、PNG、字體文件都齊下載不用花錢(qián)。我當(dāng)時(shí)第一反應(yīng)是這種東西為什么不早說(shuō)。把整套圖標(biāo)庫(kù)下載下來(lái)之后我把從下載、解壓、選格式、接進(jìn)PPT、接進(jìn)前端項(xiàng)目到處理各種版權(quán)細(xì)節(jié)的完整過(guò)程走了一遍。這篇文章不聊虛的就講清楚這套2024版華為圖標(biāo)庫(kù)到底能干什么、怎么下、怎么用、有哪些坑。無(wú)論你是做UI的設(shè)計(jì)師、寫(xiě)頁(yè)面的前端、準(zhǔn)備華為ICT大賽答辯PPT的學(xué)生還是給公司做華為云相關(guān)方案的產(chǎn)品經(jīng)理應(yīng)該都能在這里面找到直接能用的東西。1. 華為這套免費(fèi)圖標(biāo)庫(kù)到底解決了什么問(wèn)題1.1 華為為什么要公開(kāi)自己的圖標(biāo)庫(kù)先說(shuō)一個(gè)很多非設(shè)計(jì)崗的朋友不理解的事圖標(biāo)庫(kù)不是畫(huà)幾個(gè)圖形那么簡(jiǎn)單。華為的產(chǎn)品線(xiàn)太多了手機(jī)、平板、路由器、智慧屏、云服務(wù)、開(kāi)發(fā)者工具如果每個(gè)團(tuán)隊(duì)各畫(huà)各的圖標(biāo)用戶(hù)看到的界面就會(huì)像拼盤(pán)一樣雜亂。所以華為需要一套統(tǒng)一的圖標(biāo)語(yǔ)言華為官方確實(shí)是有一套相對(duì)完整的設(shè)計(jì)規(guī)范體系圖標(biāo)庫(kù)就是這套體系里的重要組成部分。過(guò)去這套圖標(biāo)庫(kù)主要對(duì)內(nèi)使用外部人很難拿到。但華為這些年在做生態(tài)生態(tài)里的開(kāi)發(fā)者需要開(kāi)發(fā)HarmonyOS應(yīng)用需要在官網(wǎng)上介紹自己的產(chǎn)品需要做和華為相關(guān)的技術(shù)分享PPT。如果生態(tài)伙伴拿不到官方圖標(biāo)就只能自己畫(huà)畫(huà)出來(lái)風(fēng)格必然不統(tǒng)一。所以華為放出一套免費(fèi)圖標(biāo)庫(kù)本質(zhì)上是在為生態(tài)做基礎(chǔ)設(shè)施——讓所有圍繞華為生態(tài)做設(shè)計(jì)、做開(kāi)發(fā)、做內(nèi)容的人都能站在同一套視覺(jué)標(biāo)準(zhǔn)上。對(duì)用戶(hù)來(lái)說(shuō)這解決了最實(shí)際的問(wèn)題你不用再滿(mǎn)網(wǎng)找“華為風(fēng)圖標(biāo)”不用擔(dān)心版權(quán)糾紛打開(kāi)下載鏈接就能拿到風(fēng)格統(tǒng)一的整套資源。1.2 2024版圖標(biāo)庫(kù)的幾個(gè)明顯變化網(wǎng)上很多舊的圖標(biāo)庫(kù)資源還是兩三年以前的包圖標(biāo)數(shù)量少、風(fēng)格偏老舊、不支持深淺色模式。2024版我實(shí)際用下來(lái)的感受有幾點(diǎn)變化比較明顯。第一是圖標(biāo)數(shù)量多了很多尤其是設(shè)備類(lèi)和網(wǎng)絡(luò)類(lèi)圖標(biāo)。華為的AI、IoT、通信設(shè)備相關(guān)產(chǎn)品線(xiàn)擴(kuò)張很快圖標(biāo)庫(kù)也隨之一批一批補(bǔ)進(jìn)來(lái)了。做項(xiàng)目時(shí)找路由器、交換機(jī)、云主機(jī)、攝像頭、傳感器這類(lèi)圖標(biāo)基本不用去別處找替代品。第二是深淺色雙套支持已經(jīng)是標(biāo)配。不像以前只提供一套深色圖標(biāo)深色方案里還得自己手動(dòng)反白2024版直接按Light和Dark兩個(gè)目錄分好前端接進(jìn)去非常省事。第三是圖標(biāo)風(fēng)格整體更克制了。華為這套圖標(biāo)的基礎(chǔ)特征是幾何化、切角利落偏線(xiàn)性為主平時(shí)用普通線(xiàn)條大小看很舒服放大縮小都不容易變形。2024版的線(xiàn)條粗細(xì)和圓角比例明顯經(jīng)過(guò)一輪統(tǒng)一校準(zhǔn)混在一起用不會(huì)讓人感覺(jué)“這是幾個(gè)人分頭畫(huà)的”。1.3 先搞清楚“免費(fèi)”的邊界在哪里免費(fèi)兩個(gè)字最容易讓人忽略細(xì)節(jié)。按照官方這類(lèi)設(shè)計(jì)資源的通行規(guī)則華為圖標(biāo)庫(kù)的“免費(fèi)”一般指可以用于個(gè)人項(xiàng)目、商業(yè)項(xiàng)目、學(xué)習(xí)交流但有幾個(gè)紅線(xiàn)你要先記住具體以下載頁(yè)面展示的License條款為準(zhǔn)。不能用它去注冊(cè)商標(biāo)、申請(qǐng)Logo不能把圖標(biāo)庫(kù)整體或部分打包后二次銷(xiāo)售也不能把圖標(biāo)做成“華為官方同款圖標(biāo)集”拿去賣(mài)。使用的時(shí)候通常需要標(biāo)注來(lái)源比如在文檔里注明“圖標(biāo)來(lái)自華為官方圖標(biāo)庫(kù)”或者按授權(quán)要求附上出處。另外千萬(wàn)別把“華為圖標(biāo)庫(kù)”理解成“華為品牌Logo庫(kù)”。品牌Logo歸品牌規(guī)范管不歸圖標(biāo)庫(kù)管那個(gè)是不能隨意下載改色的。2. 下載渠道與文件選擇避免下到亂七八糟的“整合包”2.1 我推薦的官方下載路徑下載渠道這件事我踩過(guò)一次坑。以前圖省事在一個(gè)第三方素材站花積分下載了一個(gè)“華為2024最新圖標(biāo)庫(kù)”解壓以后發(fā)現(xiàn)圖標(biāo)數(shù)量少得可憐而且有幾個(gè)圖標(biāo)的線(xiàn)條明顯是描出來(lái)的根本不是官方矢量源文件在4K屏上一放大就露餡。后來(lái)我老老實(shí)實(shí)走官方渠道華為圖標(biāo)庫(kù)的官方發(fā)布位置主要在華為開(kāi)發(fā)者官網(wǎng)的設(shè)計(jì)資源欄目和HarmonyOS設(shè)計(jì)資源相關(guān)頁(yè)面通常需要注冊(cè)登錄華為賬號(hào)才可以下載。注冊(cè)賬號(hào)是免費(fèi)的下載也不需要付費(fèi)。另外華為生態(tài)里還有一些配套工具也會(huì)內(nèi)置圖標(biāo)資源比如華為官方的一些開(kāi)發(fā)者工具組件庫(kù)會(huì)同步更新圖標(biāo)文件。如果你的項(xiàng)目本來(lái)就用這些工具可以直接在工具內(nèi)部拉取版本更同步。如果你在網(wǎng)上看到第三方整理的“華為圖標(biāo)庫(kù)合集”我不建議直接用。倒不是說(shuō)一定有問(wèn)題而是你沒(méi)法確認(rèn)它的版本是不是最新的也沒(méi)法確認(rèn)它是否完整保留了授權(quán)說(shuō)明。圖標(biāo)這玩意兒差一個(gè)版本風(fēng)格細(xì)節(jié)可能就變了。為了省幾步登錄操作去冒版本不確定的風(fēng)險(xiǎn)不劃算。2.2 按你的實(shí)際用途選對(duì)下載內(nèi)容進(jìn)到下載頁(yè)之后你會(huì)發(fā)現(xiàn)官方提供了好幾種格式有些人一下子就懵了。其實(shí)選擇邏輯很簡(jiǎn)單按你的使用場(chǎng)景來(lái)。做UI設(shè)計(jì)稿、需要高質(zhì)量矢量編輯的優(yōu)先下載Sketch或Figma格式。這兩個(gè)格式里面圖標(biāo)是帶符號(hào)和樣式的可以批量改色、批量調(diào)整適合設(shè)計(jì)團(tuán)隊(duì)維護(hù)統(tǒng)一的UI組件庫(kù)。做前端開(kāi)發(fā)需要把圖標(biāo)接進(jìn)網(wǎng)頁(yè)或App的下載SVG源文件或者字體文件Font。SVG更適合現(xiàn)代前端工程化后面我會(huì)詳細(xì)講怎么接。寫(xiě)文檔、做PPT、畫(huà)架構(gòu)圖的下載PNG或者SVG都行。如果你用的Office版本比較新我建議直接下SVG因?yàn)镾VG在PowerPoint里可以無(wú)損改色比PNG好用得多。另外注意看下載包里有沒(méi)有Light和Dark兩套。2024版圖標(biāo)庫(kù)對(duì)深淺色模式做了專(zhuān)門(mén)適配如果你的項(xiàng)目有暗色模式需求記得把兩套都下載下來(lái)別只下個(gè)淺色的。2.3 解壓后的文件結(jié)構(gòu)以及快速判斷版本新舊下載下來(lái)的ZIP包解壓后目錄結(jié)構(gòu)通常是按業(yè)務(wù)場(chǎng)景分層組織的。我實(shí)際拿到的包大致是下面這種結(jié)構(gòu)huawei_icons_2024/ ├── LICENSE.txt ├── README.md ├── font/ │ ├── huawei-icons.ttf │ ├── huawei-icons.woff │ └── huawei-icons.woff2 ├── svg/ │ ├── color/ 彩色圖標(biāo)多色 │ ├── light/ 淺色模式單色線(xiàn)性 │ └── dark/ 深色模式單色反白 ├── png/ │ └── 32px 64px 128px 等不同尺寸 └── sketch/ 或 figma/ └── 對(duì)應(yīng)平臺(tái)的設(shè)計(jì)源文件有一個(gè)小細(xì)節(jié)能幫你快速判斷版本新舊看文件名里的版本號(hào)或者看圖標(biāo)目錄里是否有最新的AI、大模型、云原生這類(lèi)新增品類(lèi)。如果包里連這些都沒(méi)收那大概率是舊版。另外看下LICENSE.txt和README.md這兩個(gè)文件在不在在的話(huà)說(shuō)明發(fā)布比較規(guī)范不在的話(huà)就要警惕是不是被別人重新打包過(guò)。拿到包先別急著拖進(jìn)項(xiàng)目我習(xí)慣先翻一遍SVG目錄和font目錄確認(rèn)里面圖標(biāo)數(shù)量跟官方頁(yè)面標(biāo)注一致再確認(rèn)一下文件命名有沒(méi)有統(tǒng)一規(guī)律。這一步花不了五分鐘但能避免后面拿到山寨包還當(dāng)正版用。3. 從解壓到真正用進(jìn)項(xiàng)目三套接法3.1 匯報(bào)和文檔場(chǎng)景PPT、Word、公眾號(hào)配圖先講最輕量的用法把圖標(biāo)接進(jìn)PPT。很多人對(duì)SVG有個(gè)誤解以為SVG只能在網(wǎng)頁(yè)里用其實(shí)從Office 2016開(kāi)始PowerPoint就支持直接插入SVG文件而且插入之后可以像普通形狀一樣改顏色。操作步驟非常簡(jiǎn)單在SVG目錄里找到你想要的圖標(biāo)直接拖進(jìn)PPT畫(huà)布。選中圖標(biāo)在“形狀填充”或“圖形格式”里調(diào)整填充顏色單色線(xiàn)性圖標(biāo)可以直接修改。調(diào)整大小的時(shí)候按住Shift鍵等比例縮放圖標(biāo)不會(huì)變形。這里有一個(gè)老手才知道的技巧如果拖進(jìn)去的SVG圖標(biāo)是多個(gè)元素組合在一起的選中后無(wú)法整體改色此時(shí)可以右鍵“組合”按鈕找到“取消組合”取消一到兩次之后圖標(biāo)會(huì)拆成獨(dú)立的矢量形狀這時(shí)再逐個(gè)改色或者統(tǒng)一選中改色就能完全變成你自己的風(fēng)格。從PPT 2016之后的版本通常剛插入的SVG默認(rèn)就是“圖形”對(duì)象可以直接改填充色只有從舊版軟件粘貼過(guò)來(lái)的才需要取消組合。Word和公眾號(hào)配圖的邏輯也差不多。Word里能用同樣的方式改顏色公眾號(hào)編輯器不能直接拖SVG需要先用設(shè)計(jì)工具把圖標(biāo)導(dǎo)出成PNG再上傳。導(dǎo)出PNG的時(shí)候務(wù)必把尺寸設(shè)置得比實(shí)際顯示大兩倍以上不要用默認(rèn)的200×200小圖否則公眾號(hào)文章在高清屏上會(huì)顯得圖標(biāo)邊緣發(fā)虛。3.2 前端項(xiàng)目場(chǎng)景SVG Sprite與IconFont的代碼級(jí)接入前端場(chǎng)景是我這次重點(diǎn)研究的。2024版圖標(biāo)庫(kù)提供了多種接入方式你拿到手之后不要一股腦把幾百個(gè)SVG全部塞進(jìn)項(xiàng)目里那樣打包體積會(huì)非常難看。推薦的做法是按需引入。先看SVG Sprite方式。SVG Sprite的原理是把所有圖標(biāo)Ping合成到一個(gè)SVG文件里然后用雪碧圖技術(shù)來(lái)引用。如果是自動(dòng)化程度更高的項(xiàng)目推薦直接用SVG Sprite插件的方式在打包的時(shí)候自動(dòng)按需生成雪碧圖。Vite項(xiàng)目里可以這樣配置// vite.config.js import { createSvgIconsPlugin } from vite-plugin-svg-icons import path from path export default defineConfig({ plugins: [ createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), src/assets/icons)], symbolId: icon-[name], }), ], })把需要用到的SVG文件放到src/assets/icons目錄下在頁(yè)面里用統(tǒng)一的SVG組件引用template svg aria-hiddentrue classsvg-icon use xlink:href#icon-communication-router / /svg /template這樣可以做到只打包實(shí)際用到的圖標(biāo)同時(shí)CSS可以統(tǒng)一控制圖標(biāo)的尺寸和顏色.svg-icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.15em; }因?yàn)楣俜降拇蠖鄶?shù)圖標(biāo)是單色的fill設(shè)置成currentColor就可以讓圖標(biāo)顏色跟隨文字顏色變化深淺色模式切換時(shí)只要換文字顏色圖標(biāo)就自動(dòng)跟著變這是很優(yōu)雅的方案。第二種是IconFont方式。這種方式比較傳統(tǒng)適合老項(xiàng)目或者對(duì)加載體積比較敏感的輕量頁(yè)面。它把圖標(biāo)做成字體文件通過(guò)Unicode字符來(lái)引用也可以選擇一個(gè)偷懶但實(shí)用的方式去阿里的iconfont項(xiàng)目管理里手動(dòng)上傳你需要的華為圖標(biāo)SVG生成自己的圖標(biāo)字體。為什么我不建議全量引用官方的Font文件因?yàn)楣俜紽ont文件包含了幾百個(gè)圖標(biāo)但你可能只用得到二三十個(gè)全量引入意味著用戶(hù)要額外下載上百KB的字體文件完全沒(méi)有必要。自己傳一份精簡(jiǎn)版體積能縮小到10KB左右。3.3 設(shè)計(jì)稿場(chǎng)景Figma和Sketch里的組件庫(kù)管理設(shè)計(jì)團(tuán)隊(duì)用官方圖標(biāo)庫(kù)的方式我個(gè)人建議不要直接拿官方文件當(dāng)設(shè)計(jì)文件的底圖也不要直接改官方源文件。正確的打開(kāi)方式是把官方圖標(biāo)導(dǎo)入到團(tuán)隊(duì)的組件庫(kù)里形成自己的Team Library。在Figma里操作的話(huà)把下載的Figma格式圖標(biāo)文件作為庫(kù)文件通過(guò)“Library”功能分享給團(tuán)隊(duì)。團(tuán)隊(duì)成員在設(shè)計(jì)時(shí)直接通過(guò)Assets面板拖拽調(diào)用圖標(biāo)自帶尺寸規(guī)范不會(huì)出現(xiàn)“這個(gè)圖標(biāo)怎么比那個(gè)大一圈”的問(wèn)題。團(tuán)隊(duì)庫(kù)做好之后還要做幾件事給每個(gè)圖標(biāo)補(bǔ)充中文和英文的別名標(biāo)簽方便團(tuán)隊(duì)成員搜索。把線(xiàn)性和面性圖標(biāo)、淺色和深色圖標(biāo)做好命名區(qū)分。把圖標(biāo)網(wǎng)格、常用尺寸16、24、32、48預(yù)設(shè)成樣式供團(tuán)隊(duì)一鍵調(diào)用。這些工作雖然前期要花一兩個(gè)小時(shí)但對(duì)團(tuán)隊(duì)協(xié)作效率的提升非常明顯。尤其是做多頁(yè)面、多端適配的項(xiàng)目統(tǒng)一圖標(biāo)來(lái)源能讓設(shè)計(jì)評(píng)審時(shí)少吵很多架。3.4 一個(gè)貫穿全流程的示例深淺色模式適配深淺色模式的適配算是我用了這套圖標(biāo)庫(kù)之后感受最深的一個(gè)環(huán)節(jié)。以前做官網(wǎng)的暗色模式圖標(biāo)需要設(shè)計(jì)師手動(dòng)出一套反白版前端拿著兩套圖標(biāo)來(lái)回切換。華為2024版圖標(biāo)庫(kù)直接給你分好了Light和Dark兩套目錄前端只要在CSS里根據(jù)主題變量切換圖標(biāo)路徑即可。如果項(xiàng)目里用的是SVG Sprite方式主題切換時(shí)引用不同的Sprite文件。如果是把SVG作為單獨(dú)組件引入可以封裝一個(gè)Icon組件根據(jù)主題自動(dòng)切換圖標(biāo)源template svg classapp-icon aria-hiddentrue use :xlink:hreficonUrl / /svg /template script setup import { computed } from vue import { useTheme } from /stores/theme const props defineProps({ name: String, }) const theme useTheme() const iconUrl computed(() { return theme.isDark ? #dark-${props.name} : #light-${props.name} }) /script這樣一來(lái)產(chǎn)品切換主題時(shí)圖標(biāo)跟著自動(dòng)換不需要在業(yè)務(wù)代碼里做任何額外的判斷。4. 實(shí)測(cè)中遇到的坑和版權(quán)紅線(xiàn)的具體邊界4.1 命名規(guī)則與檢索技巧英文名比中文名好找圖標(biāo)庫(kù)資源一多找圖標(biāo)就成了效率殺手。我一開(kāi)始在文件夾里按中文語(yǔ)義猜文件名比如想找“路由器”猜了router、wifi、hub等好幾個(gè)詞浪費(fèi)了不少時(shí)間。后來(lái)發(fā)現(xiàn)官方圖標(biāo)的命名有穩(wěn)定的前綴和語(yǔ)義邏輯當(dāng)你掌握了它的分類(lèi)規(guī)律以后查找效率會(huì)提升不少。觀察下來(lái)主流的命名方式是語(yǔ)義型前綴加關(guān)鍵字例如device-開(kāi)頭設(shè)備類(lèi)如device-router、device-servercomm-開(kāi)頭通信業(yè)務(wù)類(lèi)如comm-network、comm-signalcloud-開(kāi)頭云計(jì)算相關(guān)如cloud-storage、cloud-functionsecurity-開(kāi)頭安全類(lèi)如security-lock、security-shieldai-開(kāi)頭人工智能相關(guān)如ai-model、ai-chip如果你要找“防火墻”搜firewall沒(méi)有那大概率它在security-前綴下。如果搜“數(shù)據(jù)庫(kù)”找不到database那試試storage或者data-開(kāi)頭的系列。想快速?gòu)膸装賯€(gè)文件里定位目標(biāo)用搜索功能按前綴過(guò)濾比逐個(gè)翻目錄快得多。還有一個(gè)小竅門(mén)官方分發(fā)文件夾里的SVG文件名通常和網(wǎng)頁(yè)端展示的圖標(biāo)名稱(chēng)是對(duì)應(yīng)的。你可以在官方在線(xiàn)預(yù)覽頁(yè)面直接搜到圖標(biāo)然后記下它的英文名再到本地文件夾里精準(zhǔn)定位這樣就不會(huì)被中文語(yǔ)義帶偏了。4.2 授權(quán)范圍什么能做什么不能做用這套圖標(biāo)庫(kù)最需要繃緊的就是授權(quán)這條線(xiàn)。網(wǎng)上搜華為圖標(biāo)庫(kù)的人很多是要做教程、做PPT、做非商業(yè)開(kāi)源項(xiàng)目這部分人大可以放心用。但如果你在公司項(xiàng)目里使用或者要做一個(gè)商業(yè)化產(chǎn)品有幾個(gè)邊界必須清楚。第一可以用于商業(yè)項(xiàng)目但通常需要標(biāo)注來(lái)源。請(qǐng)?jiān)谠O(shè)計(jì)稿說(shuō)明頁(yè)、網(wǎng)站頁(yè)腳或者項(xiàng)目README里注明圖標(biāo)來(lái)源具體署名方式以官方License要求為準(zhǔn)。第二不能直接申請(qǐng)商標(biāo)或作為L(zhǎng)ogo主體。圖標(biāo)庫(kù)里的圖形是華為的設(shè)計(jì)資產(chǎn)商標(biāo)注冊(cè)屬于典型的高風(fēng)險(xiǎn)使用場(chǎng)景。說(shuō)得直白一點(diǎn)哪怕你把圖標(biāo)改了個(gè)顏色、調(diào)了一下角度也不能拿去申請(qǐng)注冊(cè)商標(biāo)因?yàn)楹诵膱D形跟原版仍然構(gòu)成實(shí)質(zhì)性近似。第三不能二次分發(fā)獲利。把圖標(biāo)庫(kù)整理成付費(fèi)資源包去賣(mài)或者整合到自己的模板產(chǎn)品里收費(fèi)這都是明令禁止的行為。哪怕你做了二次加工甲方付費(fèi)買(mǎi)了你的成品也不行因?yàn)樗夭膩?lái)源本身就是禁止商售的。第四不能造成官方合作誤解。做演示文稿或者視頻的時(shí)候如果大量使用華為圖標(biāo)又沒(méi)有做任何說(shuō)明容易讓觀眾誤以為你和華為有官方合作。嚴(yán)謹(jǐn)?shù)淖龇ㄊ羌右豁?yè)“Presented with icons from HUAWEI Icon Library”之類(lèi)的聲明。4.3 渲染兼容性PPT改色、瀏覽器回退、清晰度問(wèn)題先說(shuō)一下PPT里SVG改色的坑。新版PowerPoint對(duì)SVG支持確實(shí)不錯(cuò)但如果你拖入的SVG帶有多個(gè)復(fù)雜路徑或者圖標(biāo)內(nèi)部用了漸變改色時(shí)可能出現(xiàn)“顏色沒(méi)反應(yīng)”的情況。這時(shí)候先檢查圖標(biāo)是不是被PowerPoint自動(dòng)轉(zhuǎn)換成了圖片格式真轉(zhuǎn)成圖片的話(huà)建議重新拖入一個(gè)未編輯過(guò)的SVG文件然后用“圖形格式”菜單的“形狀填充”修改。另外PPT的“取消組合”操作對(duì)SVG是有效的但對(duì)部分從字體文件復(fù)制過(guò)來(lái)的圖形無(wú)效。如果拖入的是從IconFont復(fù)制的形狀要么重新單獨(dú)下載那個(gè)SVG文件再拖入要么就用Figma把它導(dǎo)出成PNG來(lái)用。網(wǎng)頁(yè)端使用華為圖標(biāo)庫(kù)最大的兼容性風(fēng)險(xiǎn)在低版本瀏覽器對(duì)SVG外部引用的支持。舊瀏覽器上直接用use標(biāo)簽引用外部SVG Sprite可能會(huì)出現(xiàn)圖標(biāo)看不見(jiàn)的情況。這時(shí)候需要把Sprite里的SVG內(nèi)容直接內(nèi)聯(lián)到頁(yè)面里或者用IconFont代替再或者引入svg4everybody這類(lèi)兼容庫(kù)。如果你維護(hù)的是ToB系統(tǒng)用戶(hù)可能還在用老版的內(nèi)置瀏覽器訪問(wèn)這個(gè)問(wèn)題尤其要重視。再提一個(gè)清晰度問(wèn)題。有些人習(xí)慣從PNG目錄里直接挑一張128px的圖放到網(wǎng)頁(yè)上做2倍圖這在手機(jī)上能用但在高分屏上就會(huì)糊。SVG是矢量格式任何尺寸都不會(huì)糊所以前端場(chǎng)景能選SVG就不要選PNG這是我從很多項(xiàng)目里總結(jié)出來(lái)的經(jīng)驗(yàn)。實(shí)際下載和使用圖標(biāo)庫(kù)這兩天我個(gè)人最大的感受是一套設(shè)計(jì)規(guī)范級(jí)別的免費(fèi)圖標(biāo)庫(kù)價(jià)值遠(yuǎn)遠(yuǎn)不止“省了畫(huà)圖的時(shí)間”。它讓設(shè)計(jì)師和開(kāi)發(fā)者在做華為相關(guān)項(xiàng)目時(shí)不用再靠肉眼猜“華為風(fēng)格到底長(zhǎng)什么樣”也為作品的專(zhuān)業(yè)度提供了基礎(chǔ)的保障。建議不要一次性把所有圖標(biāo)都導(dǎo)入到項(xiàng)目里先梳理一遍自己的實(shí)際使用場(chǎng)景把需要的那幾十個(gè)挑出來(lái)用官方文件或者精簡(jiǎn)版本就好維護(hù)成本會(huì)低很多。