Remix Icon 图标库3229 个图标npm 一行命令接入 常用定制速查【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon给你搭后台、做管理界面图标往往是从找这一步开始拖慢进度的导航要箭头、状态要提示、表单要校验图标散在几个库里拼风格根本对不上。Remix Icon 是一套 3200 多个图标的开源中性风格图标集每个图标都有线框和填充两种样式、基于 24x24 网格绘制个人和商业项目免费使用。图标从哪儿来先想清楚你要怎么接同一套图标有三条接入路径先对照一下再动手接入方式适用场景做法npm 包 Webfont前端工程Vue/React/原生npm install remixicon --save再引入remixicon.cssCDN静态页、快速原型、不想管依赖在head里加一行link指向官方 CDN单文件 SVG设计稿、插图、导出物料直接从icons/目录取对应 SVG 文件我的建议是正经前端项目直接用 npm 接版本跟着包走升级时改个版本号就行CDN 留给临时演示页SVG 给设计师和插图场景用。如果团队网络环境特殊也可以把仓库 clone 下来自己托管git clone https://gitcode.com/gh_mirrors/re/RemixIcon拿到源码后真正要进你项目的只有fonts/这一部分。npm 安装后在入口文件引入样式即可这行 CSS 会注册字体并生成全部ri-开头的类名import remixicon/fonts/remixicon.css引入之后页面里一个i标签就能出图标命名规则是ri-{名字}-{line 或 fill}i classri-home-line/i i classri-settings-3-fill/i按场景找图标你要做什么就用哪几个类名全表可以直接翻fonts/remixicon.css3200 多条。找起来更快的思路是按用途挑这里只给每类的代表项你要做什么常用类名页面导航ri-arrow-left-line、ri-arrow-right-line、ri-corner-right-down-line状态提示ri-notification-line、ri-notification-2-line、ri-error-warning-line表单操作ri-checkbox-line、ri-close-line、ri-lock-line上传下载ri-download-line、ri-file-add-line用户与权限ri-user-3-line、ri-admin-line比如做一个操作按钮区线框图标加悬停变色基本就是最终效果buttoni classri-download-line/i/button buttoni classri-delete-bin-line/i/button buttoni classri-close-line/i/button图标颜色默认跟随文字色按钮加一条color样式就能统一换色不用逐个改。高频定制颜色、尺寸、换风格 定制就三件事。颜色直接继承 CSScolor写在图标自身或父容器上.toolbar i { color: #006aff; }尺寸有两种改法。精确控制就写font-size——图标本质是字体尺寸跟随字号不想算像素就用自带的倍数类ri-xs到ri-10x外加一个固定宽度的ri-fwdiv stylefont-size: 24px; i classri-home-line ri-2x/i i classri-home-line ri-3x/i i classri-home-line ri-fw/i /div换风格不需要换图标库同一个名字把结尾的-line换成-fill就是从线框切到填充适合做选中、激活态。React、Vue 项目另有官方组件包装好后不用引 CSS直接组件化使用import { RiHeartFill } from remixicon/react RiHeartFill size{36} colorred /组件名用大驼峰写法如RiHeartFill和类名的对应关系是固定的。新手容易踩的五个坑 ⚠️现象类名写了图标不显示。原因remixicon.css没引入或者类名写错——前缀是ri-v2.0 之前叫remixicon-老教程里的写法已失效结尾必须是-line或-fill。 解法先确认样式文件进了构建产物再逐字核对类名。现象想要实心图标搜了半天名字。原因-line是线框样式、-fill是填充样式两个后缀必须带全。 解法同一图标就是同名换后缀平时把线框当默认、填充留给强调态即可。现象给了ri-2x图标大小和预期不符。原因尺寸类是相对父级font-size的倍数ri-2x是 2em不是 24px。 解法想要精确值就自己写font-size倍数类只用来快速微调。现象把remixicon.css拷走单独用图标全没了。原因CSS 里的font-face用相对路径加载remixicon.woff2等字体文件CSS 和字体文件不在同一目录就会 404。 解法fonts/目录整体一起复制或确保字体文件相对 CSS 的路径没变。现象在 React 里照抄i classri-xxx写法。原因组件包走的是组件而不是类名两边 API 不同。 解法装了remixicon/react或remixicon/vue就别再引 CSS直接用组件传size、color属性。去哪找什么仓库资源地图fonts/Webfont 全家桶remixicon.css或 less/scss/styl 变体、woff2/woff/ttf/eot 字体加一个remixicon.symbol.svg雪碧图——用use方式引用单个图标时就用它。icons/全部 3229 个 SVG 源文件按 Arrows、Business、System 等 20 个分类放在子目录里线框和填充一一对应。tags.json每个图标的中英文搜索关键词本地搜图时比翻目录快得多。README.md、README_CN.md使用文档入口中英文都有License是 Remix Icon License v1.0允许个人和商业使用。最后三句普通 Web 项目npm 装包、引一行 CSS、用ri-类名十分钟跑通。设计师取图直接去icons/按分类拿 SVG别把整包塞进项目。名字记不住时先翻tags.json的中文关键词比硬记类名省事。【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考