5 分钟给页面加上开源图标库：Remix Icon 引入与定制教程

5 分钟给页面加上开源图标库：Remix Icon 引入与定制教程

【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon

Remix Icon 是一套线条风格中性的开源图标库，包含 3200 多个图标，个人与商业项目均可免费使用。网页页面、后台管理界面、移动端 UI 都能用到。下面从引入到定制，带你走一遍完整流程。

如何引入 Remix Icon：npm 到 CSS 的三种方式

方式一：用 npm 安装。一条命令，图标字体就位：

npm install remixicon

装好后，把包里 fonts 目录下的 css 引到页面，或者把整个 fonts 目录拷到自己项目里即可。

方式二：HTML 直接链接 CSS。没有构建工具的话，这种方式最省事：把 css 文件放到 HTML 同目录，然后：

<link rel="stylesheet" href="remixicon.css" /> <i class="ri-mail-line"></i>

这份 css 里已经写好了图标字体声明，引入后，给元素加上带ri-前缀的类名就能渲染出图标，颜色与大小跟着文字走。

方式三：只引字体文件。如果项目自己管理样式，就只拷woff2、woff、ttf三个字体文件，自己声明@font-face，再用对应的 unicode 编码输出图标。适合想精简体积、只留必要字体的场景，步骤多一点，效果与前两种方式一致。

3200+ 个图标怎么挑：命名规律

每个图标的类名 = 名称 + 风格后缀，后缀直接告诉你风格：

• -line结尾 = 线性图标，如ri-mail-line
• -fill结尾 = 实心图标，如ri-mail-fill

同名图标成对出现：找到线性版，实心版基本也一定在，换个后缀就能贴合页面风格 💡 比如导航按钮默认用线性、选中态切实心，视觉更统一。

图标名本身就是英文含义，mail 是邮件、calendar 是日历，见名知义。类名前缀统一是ri-，看到ri-开头的类名，基本就是这套图标。

图标按类别分到子目录里：icons/Arrows/全是箭头方向类，Business 目录收图表、公文包、日历系列，Communication 目录收聊天、消息系列。找图标先定位类别目录，再按名称筛选，比逐个翻快得多。

两行 CSS 改图标颜色和大小

图标是字体，color、font-size这些文字属性对它就生效，不用额外处理：

.ri-mail-line { color: #4a6cf7; font-size: 24px; }

颜色用color改，大小用font-size改，不需要换图片文件。也可以叠加自带的尺寸类，如ri-sm、ri-lg、ri-2x、ri-10x，直接放大缩小。同一页面里线性与实心混用时，统一颜色能让风格更协调。

什么时候该用 SVG

单色静态图标，字体方案足够。遇到这几种情况再换 SVG，这也是设计交付场景的常规选择：

• 图标需要多色组合，或要调整描边粗细
• 想给图标内部图形加动画
• 要精确修改图标细节

SVG 源文件都在 icons 目录里，一个图标一个文件，按类别分子目录存放（如icons/Arrows/），文件本身也很轻。把 SVG 代码贴进 HTML 即可，也可以用<img>引用。

整个项目就两个目录：fonts 存字体文件和现成 css，icons 存 SVG 源文件，和上面两种用法一一对应。多数项目用字体方案就够了；碰到多色或动画需求，回 icons 目录挑对应 SVG。

【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon