名称: remix-icon 描述: RemixIcon 实现指南 - 一个开源的中立风格图标库，提供 3,100 多个图标，包括线性和填充样式。适用于向应用程序添加图标、构建 UI 组件或设计界面。支持 Webfonts、SVG、React、Vue 和直接集成。

RemixIcon 实现指南

RemixIcon 是一个全面的图标库，拥有 3,100 多个精心设计的图标，提供线性（-line）和填充（-fill）两种样式。所有图标都基于 24x24 像素网格构建，确保完美对齐和一致性。

何时使用此技能

使用 RemixIcon 时：

向 Web 应用程序、移动应用或设计系统添加图标
构建需要一致图标图形的 UI 组件
实现导航、按钮、状态指示器或媒体控制
创建演示文稿、文档或设计原型
需要双语图标搜索（英语 + 中文）
需要线性和填充两种图标变体

快速开始

安装

NPM（推荐用于 Web 项目）：

npm install remixicon
# 或
yarn add remixicon
# 或
pnpm install remixicon

CDN（无需安装）：

<link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css"
    rel="stylesheet"
/>

React：

npm install @remixicon/react

Vue 3：

npm install @remixicon/vue

图标命名约定

模式： ri-{图标名称}-{样式}

其中：

图标名称：描述性名称，使用 kebab-case（例如，arrow-right、home、user-add）
样式：line（线性）或 fill（填充）

示例：

ri-home-line           # 主页图标，线性
ri-home-fill           # 主页图标，填充
ri-arrow-right-line    # 右箭头，线性
ri-search-line         # 搜索图标，线性
ri-heart-fill          # 心形图标，填充

使用模式

1. Webfont（HTML/CSS）

基本用法：

<i class="ri-admin-line"></i>
<i class="ri-home-fill"></i>

带大小类：

<i class="ri-home-line ri-2x"></i>      <!-- 2em 大小 -->
<i class="ri-search-line ri-lg"></i>    <!-- 1.3333em -->
<i class="ri-heart-fill ri-xl"></i>     <!-- 1.5em -->

可用大小类：

ri-xxs (0.5em)
ri-xs (0.75em)
ri-sm (0.875em)
ri-1x (1em)
ri-lg (1.3333em)
ri-xl (1.5em)
ri-2x 到 ri-10x (2em - 10em)
ri-fw（固定宽度用于对齐）

2. 直接 SVG

下载和使用：

<img height="32" width="32" src="路径/admin-fill.svg" />

内联 SVG：

<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="...图标路径数据..."/>
</svg>

3. SVG Sprite

<svg class="remix-icon">
    <use xlink:href="路径/remixicon.symbol.svg#ri-admin-fill"></use>
</svg>

.remix-icon {
    width: 24px;
    height: 24px;
    fill: #333;
}

4. React 集成

import { RiHeartFill, RiHomeLine, RiSearchLine } from "@remixicon/react";

function MyComponent() {
    return (
        <>
            <RiHeartFill
                size={36}              // 自定义大小
                color="red"            // 填充颜色
                className="my-icon"    // 自定义类
            />
            <RiHomeLine size={24} />
            <RiSearchLine size="1.5em" color="#666" />
        </>
    );
}

5. Vue 3 集成

<script setup lang="ts">
import { RiHeartFill, RiHomeLine } from "@remixicon/vue";
</script>

<template>
    <RiHeartFill size="36px" color="red" className="my-icon" />
    <RiHomeLine size="24px" />
</template>

图标类别

图标按 20 个语义类别 组织：

类别	示例	使用场景
箭头	arrow-left, arrow-up, corner-up-left	导航、方向、流程
建筑	home, bank, hospital, store	位置、设施
商业	briefcase, archive, pie-chart	商业、分析
通信	chat, phone, mail, message	消息传递、联系人
设计	brush, palette, magic, crop	创意工具
开发	code, terminal, bug, git-branch	开发工具
设备	phone, laptop, tablet, printer	硬件、电子设备
文档	file, folder, article, draft	文件、内容
编辑器	bold, italic, link, list	文本格式化
金融	money, wallet, bank-card, coin	支付、交易
食物	restaurant, cake, cup, knife	餐饮、饮料
健康与医疗	health, heart-pulse, capsule	医疗保健、健康
标志	github, twitter, facebook	品牌图标
地图	map, pin, compass, navigation	位置、方向
媒体	play, pause, volume, camera	多媒体控制
系统	settings, download, delete, add	UI 控制、操作
用户与面孔	user, account, team, contacts	个人资料、人员
天气	sun, cloud, rain, moon	气候、天气预报
其他	杂项图标	通用目的

查找图标

1. 按类别浏览

访问 https://remixicon.com 并导航类别以视觉浏览图标。

2. 使用关键词搜索

使用英语或中文关键词。图标有全面的标签以方便发现。

示例搜索：

“home” → home, home-2, home-3, home-gear, home-wifi
“arrow” → arrow-left, arrow-right, arrow-up, arrow-down
“user” → user, user-add, user-follow, account-circle

3. 考虑图标变体

许多图标有编号变体（home, home-2, home-3），提供风格替代选择。

最佳实践

选择样式

线性（Outline）样式：

使用于：干净、简约的界面
最佳搭配：浅色背景、高对比度需求
示例：导航菜单、工具栏、表单

填充（Filled）样式：

使用于：强调、活动状态、主要操作
最佳搭配：按钮、选中项目、重要指示器
示例：活动导航项、主要 CTA、通知

无障碍访问

始终为仅图标元素提供 aria-labels：

<button aria-label="搜索">
    <i class="ri-search-line"></i>
</button>

对于装饰性图标，使用 aria-hidden：

<span aria-hidden="true">
    <i class="ri-star-fill"></i>
</span>

性能

对于 Web 应用程序：

使用 webfonts（WOFF2：179KB）处理多个图标
使用单个 SVG 仅处理 1-5 个图标
使用 SVG sprites 处理 5-20 个图标
优先使用 CDN 以获得更快的全球交付

字体格式按大小（从小到大）：

WOFF2：179KB（推荐）
WOFF：245KB
TTF：579KB
EOT：579KB（支持旧版 IE）

颜色和大小

使用 currentColor 以获得灵活性：

.icon {
    color: #333;  /* 图标继承此颜色 */
}

维护 24x24 网格对齐：

/* 良好 - 保持网格 */
.icon { font-size: 24px; }
.icon { font-size: 48px; }  /* 24 * 2 */

/* 避免 - 破坏网格对齐 */
.icon { font-size: 20px; }
.icon { font-size: 30px; }

框架集成

Next.js：

import '@/styles/remixicon.css';  // 在 _app.js 或 layout 中
import { RiHomeLine } from "@remixicon/react";

Tailwind CSS：

<i class="ri-home-line text-2xl text-blue-500"></i>

CSS Modules：

import styles from './component.module.css';
import 'remixicon/fonts/remixicon.css';

<i className={`ri-home-line ${styles.icon}`}></i>

高级用法

使用 CSS 自定义图标大小

.custom-icon {
    font-size: 32px;
    line-height: 1;
    vertical-align: middle;
}

/* 响应式大小 */
@media (max-width: 768px) {
    .custom-icon {
        font-size: 24px;
    }
}

图标动画

.spinning-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

React 中的动态图标

function IconButton({ iconName, filled = false }) {
    const iconClass = `ri-${iconName}-${filled ? 'fill' : 'line'}`;
    return <i className={iconClass} />;
}

// 用法
<IconButton iconName="home" />
<IconButton iconName="heart" filled />

设计工具集成

Figma 插件

安装官方 RemixIcon Figma 插件：

插件： RemixIcon
URL： https://www.figma.com/community/plugin/1089569154784319246/remixicon
功能： 在 Figma 工作区中直接访问图标

复制到设计工具

图标可以直接从 https://remixicon.com 复制到：

Sketch
Figma（无需插件）
Adobe XD
Adobe Illustrator

PowerPoint & Keynote

使用 RemixIcon-Slides 进行直接集成：

仓库： https://github.com/Remix-Design/RemixIcon-Slides
功能： 在演示文稿中直接编辑图标样式

常见模式

导航菜单

<nav>
    <a href="/home">
        <i class="ri-home-line"></i>
        <span>主页</span>
    </a>
    <a href="/search">
        <i class="ri-search-line"></i>
        <span>搜索</span>
    </a>
    <a href="/profile">
        <i class="ri-user-line"></i>
        <span>个人资料</span>
    </a>
</nav>

带图标的按钮

<button class="btn-primary">
    <i class="ri-download-line"></i>
    下载
</button>

状态指示器

// React 示例
function StatusIcon({ status }) {
    const icons = {
        success: <RiCheckboxCircleFill color="green" />,
        error: <RiErrorWarningFill color="red" />,
        warning: <RiAlertFill color="orange" />,
        info: <RiInformationFill color="blue" />
    };
    return icons[status];
}

带图标的输入框

<div class="input-group">
    <i class="ri-search-line"></i>
    <input type="text" placeholder="搜索..." />
</div>

故障排除

图标不显示

检查：

CSS 文件已加载：<link href="remixicon.css" rel="stylesheet" />
类名语法：ri-{名称}-{样式}（例如，ri-home-line）
字体文件可访问（检查浏览器网络标签）
没有字体家族覆盖与 .ri-* 类冲突

图标大小错误

解决方案：

使用大小类：ri-lg、ri-2x 等
设置父级 font-size 属性
确保 line-height: 1 以正确对齐
如有需要，使用 vertical-align: middle

图标看起来模糊

原因：

非整数字体大小破坏像素网格
浏览器缩放级别
变换属性导致子像素渲染

修复： 使用 24px 的倍数（24、48、72、96）以获得清晰渲染

资源

网站： https://remixicon.com
GitHub： https://github.com/Remix-Design/RemixIcon
NPM： https://www.npmjs.com/package/remixicon
React 包： @remixicon/react
Vue 包： @remixicon/vue
许可证： Apache 2.0（免费用于个人和商业用途）
总图标数： 3,100+
当前版本： 4.7.0

支持

问题： https://github.com/Remix-Design/RemixIcon/issues
邮箱： jimmy@remixdesign.cn
Twitter/X： @RemixDesignHQ

版本历史

v4.7.0（最新）：3,100+ 图标，提供 React 和 Vue 包
完整变更日志可在 GitHub 发布页面找到