微型 SVG 圖標(biāo)怎么選？這份 Teenyicons 實(shí)戰(zhàn)手記給你答案)
600 個(gè)微型 SVG 圖標(biāo)怎么選這份 Teenyicons 實(shí)戰(zhàn)手記給你答案【免費(fèi)下載鏈接】teenyiconsTiny minimal 1px icons designed to fit in the smallest places.項(xiàng)目地址: https://gitcode.com/gh_mirrors/te/teenyicons做頁面做到最后你是不是也常卡在差一點(diǎn)點(diǎn)精致上按鈕干巴巴、導(dǎo)航光禿禿去下載一套大圖標(biāo)庫又嫌重硬塞進(jìn) 16px 的小按鈕里還糊成一團(tuán)。Teenyicons 正是為這類場景而生的微型 SVG 圖標(biāo)庫——600 個(gè)圖標(biāo)全部設(shè)計(jì)在 15×15 的網(wǎng)格上用 1px 的極簡線條專治小空間放不下圖標(biāo)的煩惱。既然痛點(diǎn)這么明確不妨先花 30 秒感受一下它的手感。在項(xiàng)目里執(zhí)行一條命令npm install teenyicons裝完從node_modules/teenyicons/outline/里挑一個(gè)home.svg把里面的path粘進(jìn)你的 HTML圖標(biāo)立刻亮起來。這大概是接入成本最低的圖標(biāo)庫之一而它的底氣來自幾個(gè)實(shí)打?qū)嵉奶攸c(diǎn)每個(gè)圖標(biāo)都有輪廓outline與實(shí)心solid兩套風(fēng)格共 1200 個(gè)獨(dú)立 SVG 文件15×15 網(wǎng)格加 1px 描邊從 12px 縮到 48px 放大都保持銳利顏色交給currentColor接管一行 CSS 就能全局換膚MIT 許可商用項(xiàng)目直接用連署名都省了。跑通之后我們直接上一個(gè)真實(shí)的小案例給下載管理頁面配一套圖標(biāo)。需求是頂部一個(gè)返回按鈕列表里每行有下載中、完成、失敗三種狀態(tài)行尾放重試和刪除兩個(gè)操作。先解決返回按鈕。到src/outline/目錄找到arrow-left.svg把內(nèi)容內(nèi)聯(lián)進(jìn)按鈕svg classicon viewBox0 0 15 15 fillnone xmlnshttp://www.w3.org/2000/svg path dM1.5 7.5L5.5 3.5M1.5 7.5L5.5 11.5M1.5 7.5H14 strokecurrentColor/ /svg這段代碼把 15×15 的視圖框原樣搬進(jìn)頁面strokecurrentColor意味著圖標(biāo)顏色永遠(yuǎn)跟隨文字的color換色只需一行 CSS。這里有個(gè)小細(xì)節(jié)值得記住源碼里的 stroke 是黑色內(nèi)聯(lián)時(shí)改成currentColor才能享受繼承換色。接著處理三個(gè)狀態(tài)圖標(biāo)。與其逐個(gè)內(nèi)聯(lián)不如用精靈圖——把teenyicons-outline-sprite.svg放進(jìn)靜態(tài)目錄按名字取用svg classiconuse xlink:href/sprites/teenyicons-outline-sprite.svg#outline--download//svg一行代碼從精靈圖里取出download圖標(biāo)多個(gè)圖標(biāo)共用一次 HTTP 請(qǐng)求這也是項(xiàng)目 README 推薦的批量用法。最后給刪除按鈕換上solid/bin.svg實(shí)心版本用更飽滿的筆觸和細(xì)線條的輪廓圖標(biāo)形成視覺主次——雙風(fēng)格設(shè)計(jì)在真實(shí)界面里就是這么用的。案例跑通不算完還有三個(gè)新手幾乎必踩的坑提前告訴你。第一個(gè)坑把實(shí)心圖標(biāo)當(dāng)輪廓圖標(biāo)換色。outline 系列靠描邊畫圖改color就生效但 solid 系列的路徑是fillblack改color紋絲不動(dòng)/* 錯(cuò)誤實(shí)心圖標(biāo)只改 color顏色不變 */ .icon-solid { color: #4f46e5; } /* 正確實(shí)心圖標(biāo)要改 fill */ .icon-solid path { fill: #4f46e5; }第二個(gè)坑精靈圖的 ID 記混。符號(hào) ID 都帶風(fēng)格前綴必須寫#outline--home或#solid--home漏掉前綴只會(huì)得到一片空白。第三個(gè)建議完整精靈圖約 510KB別讓它進(jìn)首屏如果你只用三五個(gè)圖標(biāo)直接內(nèi)聯(lián) SVG 反而更快。按需取用才是性能的正解。聊完細(xì)節(jié)把視野拉遠(yuǎn)一點(diǎn)——它和主流圖標(biāo)庫到底差在哪簡單對(duì)比就清楚了。Font Awesome 功能全、體積也大適合內(nèi)容繁雜的門戶站Heroicons 走 24px 圓潤路線適合中大型界面而 Teenyicons 的 15×15 網(wǎng)格與 1px 線條決定了它的性格克制、極簡、為小空間而生。后臺(tái)側(cè)邊欄、按鈕、表格操作列、狀態(tài)指示燈這類巴掌大的地方它的銳利度和雙風(fēng)格切換就是最大優(yōu)勢反過來若你需要 48px 以上的大圖標(biāo)或多色漸變圖形它就不合適了。先看場景再看名氣。如果上面的對(duì)比讓你心動(dòng)了下一步可以這樣走打開src/outline/與src/solid/兩個(gè)目錄把 600 個(gè)圖標(biāo)挨個(gè)翻一遍——這不只是挑圖標(biāo)更是一次界面審美的快照完整用法都寫在項(xiàng)目的 README.md 里。用著順手就順手提個(gè)圖標(biāo)需求或者直接貢獻(xiàn)一個(gè)新 SVG改動(dòng)一個(gè)文件就能參與開源。愿你的下一個(gè)頁面從 15×15 像素開始處處都是恰到好處的精致?！久赓M(fèi)下載鏈接】teenyiconsTiny minimal 1px icons designed to fit in the smallest places.項(xiàng)目地址: https://gitcode.com/gh_mirrors/te/teenyicons創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 600 個(gè)微型 SVG 圖標(biāo)怎么選？這份 Teenyicons 實(shí)戰(zhàn)手記給你答案
600 個(gè)微型 SVG 圖標(biāo)怎么選這份 Teenyicons 實(shí)戰(zhàn)手記給你答案【免費(fèi)下載鏈接】teenyiconsTiny minimal 1px icons designed to fit in the smallest places.項(xiàng)目地址: https://gitcode.com/gh_mirrors/te/teenyicons做頁面做到最后你是不是也常卡在差一點(diǎn)點(diǎn)精致上按鈕干巴巴、導(dǎo)航光禿禿去下載一套大圖標(biāo)庫又嫌重硬塞進(jìn) 16px 的小按鈕里還糊成一團(tuán)。Teenyicons 正是為這類場景而生的微型 SVG 圖標(biāo)庫——600 個(gè)圖標(biāo)全部設(shè)計(jì)在 15×15 的網(wǎng)格上用 1px 的極簡線條專治小空間放不下圖標(biāo)的煩惱。既然痛點(diǎn)這么明確不妨先花 30 秒感受一下它的手感。在項(xiàng)目里執(zhí)行一條命令npm install teenyicons裝完從node_modules/teenyicons/outline/里挑一個(gè)home.svg把里面的path粘進(jìn)你的 HTML圖標(biāo)立刻亮起來。這大概是接入成本最低的圖標(biāo)庫之一而它的底氣來自幾個(gè)實(shí)打?qū)嵉奶攸c(diǎn)每個(gè)圖標(biāo)都有輪廓outline與實(shí)心solid兩套風(fēng)格共 1200 個(gè)獨(dú)立 SVG 文件15×15 網(wǎng)格加 1px 描邊從 12px 縮到 48px 放大都保持銳利顏色交給currentColor接管一行 CSS 就能全局換膚MIT 許可商用項(xiàng)目直接用連署名都省了。跑通之后我們直接上一個(gè)真實(shí)的小案例給下載管理頁面配一套圖標(biāo)。需求是頂部一個(gè)返回按鈕列表里每行有下載中、完成、失敗三種狀態(tài)行尾放重試和刪除兩個(gè)操作。先解決返回按鈕。到src/outline/目錄找到arrow-left.svg把內(nèi)容內(nèi)聯(lián)進(jìn)按鈕svg classicon viewBox0 0 15 15 fillnone xmlnshttp://www.w3.org/2000/svg path dM1.5 7.5L5.5 3.5M1.5 7.5L5.5 11.5M1.5 7.5H14 strokecurrentColor/ /svg這段代碼把 15×15 的視圖框原樣搬進(jìn)頁面strokecurrentColor意味著圖標(biāo)顏色永遠(yuǎn)跟隨文字的color換色只需一行 CSS。這里有個(gè)小細(xì)節(jié)值得記住源碼里的 stroke 是黑色內(nèi)聯(lián)時(shí)改成currentColor才能享受繼承換色。接著處理三個(gè)狀態(tài)圖標(biāo)。與其逐個(gè)內(nèi)聯(lián)不如用精靈圖——把teenyicons-outline-sprite.svg放進(jìn)靜態(tài)目錄按名字取用svg classiconuse xlink:href/sprites/teenyicons-outline-sprite.svg#outline--download//svg一行代碼從精靈圖里取出download圖標(biāo)多個(gè)圖標(biāo)共用一次 HTTP 請(qǐng)求這也是項(xiàng)目 README 推薦的批量用法。最后給刪除按鈕換上solid/bin.svg實(shí)心版本用更飽滿的筆觸和細(xì)線條的輪廓圖標(biāo)形成視覺主次——雙風(fēng)格設(shè)計(jì)在真實(shí)界面里就是這么用的。案例跑通不算完還有三個(gè)新手幾乎必踩的坑提前告訴你。第一個(gè)坑把實(shí)心圖標(biāo)當(dāng)輪廓圖標(biāo)換色。outline 系列靠描邊畫圖改color就生效但 solid 系列的路徑是fillblack改color紋絲不動(dòng)/* 錯(cuò)誤實(shí)心圖標(biāo)只改 color顏色不變 */ .icon-solid { color: #4f46e5; } /* 正確實(shí)心圖標(biāo)要改 fill */ .icon-solid path { fill: #4f46e5; }第二個(gè)坑精靈圖的 ID 記混。符號(hào) ID 都帶風(fēng)格前綴必須寫#outline--home或#solid--home漏掉前綴只會(huì)得到一片空白。第三個(gè)建議完整精靈圖約 510KB別讓它進(jìn)首屏如果你只用三五個(gè)圖標(biāo)直接內(nèi)聯(lián) SVG 反而更快。按需取用才是性能的正解。聊完細(xì)節(jié)把視野拉遠(yuǎn)一點(diǎn)——它和主流圖標(biāo)庫到底差在哪簡單對(duì)比就清楚了。Font Awesome 功能全、體積也大適合內(nèi)容繁雜的門戶站Heroicons 走 24px 圓潤路線適合中大型界面而 Teenyicons 的 15×15 網(wǎng)格與 1px 線條決定了它的性格克制、極簡、為小空間而生。后臺(tái)側(cè)邊欄、按鈕、表格操作列、狀態(tài)指示燈這類巴掌大的地方它的銳利度和雙風(fēng)格切換就是最大優(yōu)勢反過來若你需要 48px 以上的大圖標(biāo)或多色漸變圖形它就不合適了。先看場景再看名氣。如果上面的對(duì)比讓你心動(dòng)了下一步可以這樣走打開src/outline/與src/solid/兩個(gè)目錄把 600 個(gè)圖標(biāo)挨個(gè)翻一遍——這不只是挑圖標(biāo)更是一次界面審美的快照完整用法都寫在項(xiàng)目的 README.md 里。用著順手就順手提個(gè)圖標(biāo)需求或者直接貢獻(xiàn)一個(gè)新 SVG改動(dòng)一個(gè)文件就能參與開源。愿你的下一個(gè)頁面從 15×15 像素開始處處都是恰到好處的精致?！久赓M(fèi)下載鏈接】teenyiconsTiny minimal 1px icons designed to fit in the smallest places.項(xiàng)目地址: https://gitcode.com/gh_mirrors/te/teenyicons創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考