[![logo](./.github/files/logo-github.svg)](https://remixicon.com)
[![npm](https://img.shields.io/npm/v/remixicon.svg?labelColor=4A4A4A&color=006AFF&style=flat-square)](https://www.npmjs.com/package/remixicon)
[![downloads](https://img.shields.io/npm/dt/remixicon.svg?labelColor=4A4A4A&color=23AF5F&style=flat-square)](https://www.npmjs.com/package/remixicon)
[![](https://data.jsdelivr.com/v1/package/npm/remixicon/badge)](https://www.jsdelivr.com/package/npm/remixicon)
[![donate](https://img.shields.io/badge/-赞助-DA6429.svg?style=flat-square)](https://remixicon.com/support-us)
[![Sponsor](./.github/files/streamline.svg)](https://go.streamlinehq.com/remix-github)
[English](./README.md) | 简体中文
Remix Icon 是一套面向设计师和开发者的开源图标库。我们在设计之初将图标风格定义为中性风格,以便适用于各种用户群的项目。与拼凑混搭的图标库不同,Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的,并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。图标以 24x24 网格为基准,分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目,Enjoy it~
[![icon demo](./.github/files/preview.svg)](https://remixicon.com)
前往官网查看整套图标库 [remixicon.com](https://remixicon.com).
## 使用说明
### 基本用法
直接在[remixicon.com](https://remixicon.com)点击您想要的图标, 在打开的图标窗口中可以以 PNG 或者 SVG 格式进行下载,也可以直接复制 SVG 代码。
设计师小伙伴可以直接点击 `Copy SVG` 之后在 UI 设计软件中直接粘贴矢量图形,使用起来像插件一样简单便捷。
> 我们建议设计师小伙伴在需要使用某些图标的时候通过官网搜索下载使用,而不是将一整套图标全部下载放在本地文件夹中进行管理;官网的搜索栏可以帮助您快速定位您想要的图标,而且支持中文关键词搜索,这相比本地文件夹管理图标效率要高很多;最重要的是,官网的图标会持续更新。
> 在官网点击 Copy SVG 之后,可以在 Sketch 中直接粘贴矢量图标,也可以在代码文本编辑器中粘贴 SVG 代码。
>
> `Copy SVG` 功能目前支持在 Sketch、Figma、Adobe XD、Adobe Illustrator、Affinity Designer、Affinity Photo 软件中直接粘贴矢量图形。
SVG 本身也是一种图片格式,所以您可以像使用其他格式(如 JPG、PNG)的图片文件一样使用 SVG 文件,例如直接引入的方式:
```html
```
### Webfont 用法
> **Note:** Webfont 支持 npm 安装引入、CDN 引入或者手动下载的方式引入到项目当中,三选一即可。
#### 安装引入
> **Note:** 如果您打算通过 CDN 的方式使用 Remix Icon,可以跳过安装引入这一步。
```
npm install remixicon --save
```
```
import 'remixicon/fonts/remixicon.css'
```
> 入口文件引入 CSS
#### CDN 引入
如果不打算通过安装的方式使用,可以直接复制下面这行代码到您 HTML 文档的 <head> 标签中,这样就完成了 CDN 方式的图标引入,简单快捷,推荐方式。
```html
```
> 上面 CDN 链接中的 `@4.2.0` 可以更改为任何我们曾经发布过的历史版本号。
#### 手动下载引入
下载保存[`remixicon.css`](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css)文件,添加到项目的<head> 标签中即可。
#### 使用
引入 Remix Icon 图标库后,就可以在 web 项目中使用了,只要在使用图标的时候将图标名称作为类名就可以了。类名规则:ri-{name}-{style}
```html
```
> **注意:** 从 v2.0.0 开始,我们修改了 class 名称的前缀,从 `remixicon-` 改为了 `ri-`;
> **Note:** 您可以到官网 [remixicon.com](https://remixicon.com) 查阅图标对应的名称,然后在名称后添加图标风格,`-line` 代表线性风格,`-fill`代表面型风格。
#### 大小
在 `v1.3.1`及以上版本的字体使用方式下,RemixIcon 可以通过 `remixicon.css` 中集成的一些 class 来快捷改变图标的大小。这些 class 使用 `em` 相对大小单位来控制图标尺寸,相对值为图标的父类元素的字体大小值。您也可以通过 `ri-fw` 来使得图标宽度固定,例如在列表场景中使用。class 举例:
```html
...
```
> 您也可以在 [`remixicon.css`](https://github.com/Remix-Design/RemixIcon/blob/master/fonts/remixicon.css) 中查看到更多的尺寸定义相关信息。
### SVG Sprite 用法
下载 [`remixicon.symbol.svg`](https://cdn.remixicon.com/releases/v2.5.0/remixicon.symbol.svg) 并添加到您的项目目录中,通过 `