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