尧图网页设计 
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），仅供参考