Teenyicons图标库快速上手教程：10分钟给页面装好600+个微型SVG图标

Teenyicons图标库快速上手教程10分钟给页面装好600个微型SVG图标【免费下载链接】teenyiconsTiny minimal 1px icons designed to fit in the smallest places.项目地址: https://gitcode.com/gh_mirrors/te/teenyiconsTeenyicons 是一个内置 600 个微型 SVG 图标的开源图标库专为解决页面小空间放不下大图标、风格又难统一的痛点而生。本文不堆概念直接带你从安装到落地10 分钟跑通一套可复用的图标方案这也是一份可照着抄的 Teenyicons 图标库使用教程。一、先还原一个场景为什么你的页面总缺一套图标假设你正在搭一个后台管理页导航要 home搜索框要 search操作列要编辑和删除。这时你通常有三个选择自己用 CSS 画费时间样式难统一引入图标全家桶动辄几百 KB只为用其中 5 个用 Emoji够随意但和界面风格格格不入。Teenyicons 给出的是第四种答案一套基于15x15 网格设计的微型 SVG 图标库。每个图标只有 1px 粗细占用空间极小却有 600 个常用图标可选同时提供**轮廓outline与实心solid**两种风格MIT 许可下可免费商用。二、一行命令完成Teenyicons图标库安装如果你的项目还没装任何图标依赖这就是完整的 Teenyicons 图标库安装教程。在项目根目录执行npm install teenyicons用 Yarn 也一样yarn add teenyicons装好后进入node_modules/teenyicons你会看到三类内容outline/轮廓风格图标每个图标一个独立 SVG 文件solid/实心风格图标命名与 outline 一一对应三个精灵图文件teenyicons-sprite.svg、teenyicons-outline-sprite.svg、teenyicons-solid-sprite.svg下一节会用到。三、三种引入方式跑通你的第一个图标方式一内联 SVG最直观打开src/outline/search.svg把里面的代码复制到你的 HTMLsvg width15 height15 viewBox0 0 15 15 fillnone xmlnshttp://www.w3.org/2000/svg path dM14.5 14.5L10.5 10.5M6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5Z strokecurrentColor/ /svg注意这里我把原始的strokeblack改成了strokecurrentColor这样后面就能直接用 CSS 的color属性换色。方式二精灵图多图标页面的首选一页要用十几个图标时逐个内联太啰嗦。把精灵图放进站点目录再用use按 ID 引用svg width15 height15 use xlink:hrefteenyicons-outline-sprite.svg#outline--search/ /svgID 规则是风格--图标名比如实心的地球图标就是#solid--globe-africa。一个精灵图覆盖全站图标还能被浏览器缓存页面再多也只发一次请求。方式三CDN零安装先试用不确定某个图标合不合适先通过 CDN 试一下浏览器直接渲染svg width15 height15 use xlink:hrefhttps://unpkg.com/teenyicons/teenyicons-outline-sprite.svg#outline--search/ /svg四、 两招搞定颜色与尺寸定制第一招换颜色。因为描边用了currentColor图标颜色会自动继承父元素.icon-search { color: #4f46e5; } /* 紫色 */第二招调尺寸。默认是 15x15改成任意大小都不会糊因为它是矢量图.icon-sm { width: 12px; height: 12px; } .icon-lg { width: 24px; height: 24px; }五、三行CSS让图标动起来给图标加个悬停动画交互感立刻上来.icon-btn svg { transition: transform .2s ease, color .2s ease; } .icon-btn:hover svg { transform: scale(1.15); color: #2563eb; }六、⚡ 按需加载Teenyicons开源库性能优化如果你用打包工具只引入真正用到的图标别把整个库塞进产物import homeIcon from teenyicons/outline/home.svg; import searchIcon from teenyicons/outline/search.svg;如果走精灵图路线就挑体积最小的那份全量精灵约 510KB、仅轮廓约 270KB、仅实心约 240KB。你的页面只用轮廓风格就别引全量那份。再给精灵图配上长缓存响应头重复访问基本零开销。七、 封装成组件在React与Vue里一劳永逸在 React 里封装一个通用组件const TeenyIcon ({ name, variant outline, size 16, color currentColor }) ( svg width{size} height{size} style{{ color }} use xlink:href{/sprites/teenyicons-${variant}-sprite.svg#${variant}--${name}} / /svg );Vue 里对应这样写template svg :widthsize :heightsize :style{ color } use :xlink:href/sprites/teenyicons-${variant}-sprite.svg#${variant}--${name} / /svg /template script setup defineProps({ name: String, variant: { type: String, default: outline }, size: { type: Number, default: 16 }, color: { type: String, default: currentColor } }); /script封装完之后页面里一行就能用TeenyIcon namehome /。八、写在最后今天就把它用起来Teenyicons 特别适合这几类场景导航菜单、按钮图标、表单标签、成功与错误状态提示、表格操作列。这些都是小尺寸、高出现频率的位置正好是它的主场。现在动手新建一个 HTML 文件粘贴第三节的内联代码保存后在浏览器打开你的第一个 Teenyicons 图标就上线了。想浏览全部图标源码执行git clone https://gitcode.com/gh_mirrors/te/teenyicons从今天起你的页面不再缺图标也欢迎把你用到的图标组合分享出来。【免费下载链接】teenyiconsTiny minimal 1px icons designed to fit in the smallest places.项目地址: https://gitcode.com/gh_mirrors/te/teenyicons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考