3200+ 图标 10 分钟上手：Remix Icon 从 npm 接入到形态微调的实战笔记
3200 图标 10 分钟上手Remix Icon 从 npm 接入到形态微调的实战笔记【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIconRemix Icon 是一套开源的中性风格图标系统3200 多个图标基于 24x24 网格绘制line 与 fill 两种形态一一对应个人与商业项目均可免费使用。当前版本 4.9.1授权为 Remix Icon License v1.0。它凭什么值得试想要一套风格统一的中性图标全部图标按同一 24x24 网格、中性笔触设计line 和 fill 两种形态一一对应放进什么界面都不突兀想按场景找图标3200 多个图标拆进 Arrows、Business、Communication 等 18 个类别目录担心商用版权Remix Icon License v1.0 允许个人与商业使用只建议非强制在产品里提一句出处。一条命令接入三种姿势按场景选一条。npm 项目npm install remixicon装完在入口文件引入fonts/remixicon.css即可静态页面可直接引用该文件的 CDN 地址写进 head地址里记得钉死版本号也可把 css 和字体手动拷进项目。要翻 SVG 源文件或离线使用就克隆仓库git clone https://gitcode.com/gh_mirrors/re/RemixIcon框架项目走组件包Vue 3 和 React 有官方组件包remixicon/vue、remixicon/react图标直接当组件导入size、color 都是 props。从引入到出图两行代码link relstylesheet hrefremixicon.css i classri-home-line/i i classri-settings-3-fill/i类名规律是ri-名字-形态-line是描边版-fill是填充版图标名与语义一一对应。React 里对应import { RiHeartFill } from remixicon/react; RiHeartFill size{36} colorred /找图标命名规律与分类速查名字完全可以预判语义名 连字符 风格后缀。Arrows 类下有arrow-left-right类名就是ri-arrow-left-right-line换填充版只改后缀带数字的是同系列变体比如ri-home-2-line、ri-home-3-fill。icons/按 18 个类别拆子目录Arrows 里有arrow-down-line、skip-right-line、drag-move-lineBusiness 里有briefcase-line、bar-chart-box-fill、calendar-check-line。根目录tags.json存着每个图标的中英文关键词按中文也能搜。CSS 改颜色、改尺寸一次生效字体图标本质是文字改颜色和尺寸就是改 CSS.ri-home-line { color: #ff6b6b; font-size: 24px; }改一处同页该图标全局跟着变不想手写数值就用内置尺寸类ri-xs到ri-10xri-fw可固定宽度方便对齐。一个限制字体形态没有描边宽度可调项要调线宽只能改用icons/下的 SVG 源文件。进阶体积、版本与两个坑体积整包 woff2 约 184KB、css 约 154KB全量引入没问题页面只用十几个图标时直接从icons/拿单张 SVG或用remixicon.symbol.svg雪碧图版本4.x 只增图标不减升级基本无感升完挑几个核心图标回归看一眼更稳坑一v2 起类名前缀从remixicon-改成了ri-网上老文章抄来的类名会直接失效坑二css 里font-face的 eot、woff2、woff、ttf、svg 回退顺序是调好的自己删格式或调顺序老浏览器会出空白方块。目录结构与资源索引fonts/css 加 eot、ttf、woff、woff2、svg 五种字体web 接入入口scss/less/styl 变体也在里面icons/18 个类别的 SVG 源文件设计师取图、前端按需引入都从这里拿tags.json图标搜索关键词表按中文找图标时靠它LicenseRemix Icon License v1.0 全文商用前值得花两分钟读完。装完就能用。下一步在你的项目跑一条npm install remixicon把第一个占位图标换成ri-home-line再花 10 分钟调颜色。【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
