-
Notifications
You must be signed in to change notification settings - Fork 501
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1cbc904
commit 31131f6
Showing
2 changed files
with
82 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -95,28 +95,56 @@ RemixIcon can be resized by css class integrated by `remixicon.css` . Icons inhe | |
| </div> | ||
| ``` | ||
|
|
||
| > You can check the [`remixicon.css`](https://github.com/Remix-Design/RemixIcon/blob/master/fonts/remixicon.css) file for more info and details. | ||
| > You can check the [`remixicon.css`](https://github.com/Remix-Design/RemixIcon/blob/master/fonts/remixicon.css) file for more info and details. | ||
| ### SVG Sprite Usage | ||
|
|
||
| Download [`remixicon.symbol.svg`](https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.symbol.svg) file into your project directory，use icons with the `<use>` element, such as: | ||
|
|
||
| ```html | ||
| <svg class='remix'> | ||
| <use xlink:href="your-path/remixicon.symbol.svg#ri-admin-fill"></use> | ||
| <svg class="remix"> | ||
| <use xlink:href="your-path/remixicon.symbol.svg#ri-admin-fill"></use> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```css | ||
| .remix { | ||
| width: 24px; | ||
| height: 24px; | ||
| fill: #333; | ||
| width: 24px; | ||
| height: 24px; | ||
| fill: #333; | ||
| } | ||
| ``` | ||
|
|
||
| > **Note:** `ri-admin-fill` after the `#` in the above example can be replaced with any valid icon name of Remix Icon. You can go to [remixicon.com](https://remixicon.com) to check the name of the icons. `-line` means the outlined style icon, and `-fill` means the filled style icon. | ||
| ### React | ||
|
|
||
| ##### Installation | ||
|
|
||
| ```bash | ||
| npm install @remixicon/react | ||
| # or | ||
| yarn add @remixicon/react | ||
| # or | ||
| pnpm install @remixicon/react | ||
| ``` | ||
|
|
||
| ##### Usage | ||
|
|
||
| ```jsx | ||
| import { RiHeartFill } from "@radix-icons/react"; | ||
|
|
||
| const MyComponent = () => { | ||
| return ( | ||
| <RiHeartFill | ||
| size={36} // set custom `width` and `height` | ||
| color="red" // set `fill` color | ||
| className="my-icon" // add custom class name | ||
| /> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Contributing | ||
|
|
||
| > **Note:** In order to ensure the quality of each icon, we currently do not accept third-party drawn icons. If you want to contribute an icon to Remix Icon, you can create an [issue](https://github.com/Remix-Design/remixicon/issues) with a screenshot or url to your svg-format file. If you are not familiar with github, you can also email us directly `[email protected]`. | ||
|
|
@@ -137,7 +165,7 @@ We use [`tags.json`](https://github.com/Remix-Design/remixicon/blob/master/tags. | |
|
|
||
| ## License | ||
|
|
||
| Remix Icon is based on the [Apache License Version 2.0](https://github.com/Remix-Design/remixicon/blob/master/License) license. Feel free to use these icons in your products and distribute them. We would be very grateful if you mention "Remix Icon" in your product info, but it's not required. The only thing we ask is that these icons are not for sale. | ||
| Remix Icon is based on the [Apache License Version 2.0](https://github.com/Remix-Design/remixicon/blob/master/License) license. Feel free to use these icons in your products and distribute them. We would be very grateful if you mention "Remix Icon" in your product info, but it's not required. The only thing we ask is that these icons are not for sale. | ||
|
|
||
| ## Support Us | ||
|
|
||
|
|
@@ -150,4 +178,3 @@ We are all newcomers on X / Twitter. Feel free to follow us and help enhance our | |
| Designer: https://twitter.com/woaichidapi | ||
|
|
||
| Developer: https://twitter.com/wendygaoyuan | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,26 +18,26 @@ Remix Icon 是一套面向设计师和开发者的开源图标库。我们在设 | |
|
|
||
| 直接在[remixicon.com](https://remixicon.com)点击您想要的图标, 在打开的图标窗口中可以以 PNG 或者 SVG 格式进行下载，也可以直接复制 SVG 代码。 | ||
|
|
||
| 设计师小伙伴可以直接点击 `Copy SVG` 之后在UI设计软件中直接粘贴矢量图形，使用起来像插件一样简单便捷。 | ||
| 设计师小伙伴可以直接点击 `Copy SVG` 之后在 UI 设计软件中直接粘贴矢量图形，使用起来像插件一样简单便捷。 | ||
|
|
||
| > 我们建议设计师小伙伴在需要使用某些图标的时候通过官网搜索下载使用，而不是将一整套图标全部下载放在本地文件夹中进行管理；官网的搜索栏可以帮助您快速定位您想要的图标，而且支持中文关键词搜索，这相比本地文件夹管理图标效率要高很多；最重要的是，官网的图标会持续更新。 | ||
| > 在官网点击 Copy SVG 之后，可以在 Sketch 中直接粘贴矢量图标，也可以在代码文本编辑器中粘贴 SVG 代码。 | ||
| > | ||
| > `Copy SVG` 功能目前支持在 Sketch、Figma、Adobe XD、Adobe Illustrator、Affinity Designer、Affinity Photo 软件中直接粘贴矢量图形。 | ||
| SVG本身也是一种图片格式，所以您可以像使用其他格式（如JPG、PNG）的图片文件一样使用SVG文件，例如直接引入的方式： | ||
| SVG 本身也是一种图片格式，所以您可以像使用其他格式（如 JPG、PNG）的图片文件一样使用 SVG 文件，例如直接引入的方式： | ||
|
|
||
| ```html | ||
| <img height="32" width="32" src="img/admin-fill.svg" /> | ||
| ``` | ||
|
|
||
| ### Webfont 用法 | ||
|
|
||
| > **Note:** Webfont支持npm安装引入、CDN引入或者手动下载的方式引入到项目当中，三选一即可。 | ||
| > **Note:** Webfont 支持 npm 安装引入、CDN 引入或者手动下载的方式引入到项目当中，三选一即可。 | ||
| #### 安装引入 | ||
|
|
||
| > **Note:** 如果您打算通过CDN的方式使用 Remix Icon，可以跳过安装引入这一步。 | ||
| > **Note:** 如果您打算通过 CDN 的方式使用 Remix Icon，可以跳过安装引入这一步。 | ||
| ``` | ||
| npm install remixicon --save | ||
|
|
@@ -47,11 +47,11 @@ npm install remixicon --save | |
| import 'remixicon/fonts/remixicon.css' | ||
| ``` | ||
|
|
||
| > 入口文件引入CSS | ||
| > 入口文件引入 CSS | ||
| #### CDN引入 | ||
| #### CDN 引入 | ||
|
|
||
| 如果不打算通过安装的方式使用，可以直接复制下面这行代码到您HTML文档的 <head> 标签中，这样就完成了CDN方式的图标引入，简单快捷，推荐方式。 | ||
| 如果不打算通过安装的方式使用，可以直接复制下面这行代码到您 HTML 文档的 <head> 标签中，这样就完成了 CDN 方式的图标引入，简单快捷，推荐方式。 | ||
|
|
||
| ```html | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet"> | ||
|
|
@@ -65,7 +65,7 @@ import 'remixicon/fonts/remixicon.css' | |
|
|
||
| #### 使用 | ||
|
|
||
| 引入Remix Icon图标库后，就可以在web项目中使用了，只要在使用图标的时候将图标名称作为类名就可以了。类名规则：ri-{name}-{style} | ||
| 引入 Remix Icon 图标库后，就可以在 web 项目中使用了，只要在使用图标的时候将图标名称作为类名就可以了。类名规则：ri-{name}-{style} | ||
|
|
||
| ```html | ||
| <i class="ri-admin-line"></i> | ||
|
|
@@ -98,43 +98,71 @@ import 'remixicon/fonts/remixicon.css' | |
|
|
||
| > 您也可以在 [`remixicon.css`](https://github.com/Remix-Design/RemixIcon/blob/master/fonts/remixicon.css) 中查看到更多的尺寸定义相关信息。 | ||
| ### SVG Sprite用法 | ||
| ### SVG Sprite 用法 | ||
|
|
||
| 下载 [`remixicon.symbol.svg`](https://cdn.remixicon.com/releases/v2.5.0/remixicon.symbol.svg) 并添加到您的项目目录中，通过 `<use>` 标签来引用图标，通过css可以自定义图标的大小和颜色等属性，例如： | ||
| 下载 [`remixicon.symbol.svg`](https://cdn.remixicon.com/releases/v2.5.0/remixicon.symbol.svg) 并添加到您的项目目录中，通过 `<use>` 标签来引用图标，通过 css 可以自定义图标的大小和颜色等属性，例如： | ||
|
|
||
| ```html | ||
| <svg class='remix'> | ||
| <use xlink:href="存放路径/remixicon.symbol.svg#ri-admin-fill"></use> | ||
| <svg class="remix"> | ||
| <use xlink:href="存放路径/remixicon.symbol.svg#ri-admin-fill"></use> | ||
| </svg> | ||
| ``` | ||
|
|
||
| ```css | ||
| .remix { | ||
| width: 24px; | ||
| height: 24px; | ||
| fill: #333; | ||
| width: 24px; | ||
| height: 24px; | ||
| fill: #333; | ||
| } | ||
| ``` | ||
|
|
||
| > **Note:** 上面示例中 `#` 后面的 `ri-admin-fill`可以替换为任何 Remix Icon 图标名称，您可以到官网 [remixicon.com](https://remixicon.com) 查阅图标对应的名称，然后在名称后添加图标风格，`-line` 代表线性风格，`-fill` 代表面型风格。`remixicon.symbol.svg`文件默认是无法预览查看的，只能通过 `<use>` 使用之后查看。 | ||
| ### React | ||
|
|
||
| #### 安装 | ||
|
|
||
| ```bash | ||
| npm install @remixicon/react | ||
| # or | ||
| yarn add @remixicon/react | ||
| # or | ||
| pnpm install @remixicon/react | ||
| ``` | ||
|
|
||
| #### 使用 | ||
|
|
||
| ```jsx | ||
| import { RiHeartFill } from "@radix-icons/react"; | ||
|
|
||
| const MyComponent = () => { | ||
| return ( | ||
| <RiHeartFill | ||
| size={36} // 设置大小 | ||
| color="red" // 设置颜色 | ||
| className="my-icon" // 添加自定义样式名 | ||
| /> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## 协作共建 | ||
|
|
||
| > **Note:** 为了保证每一枚图标的质量，现阶段我们还不接受第三方小伙伴绘制的图标。如果您想要向 Remix Icon 贡献自己设计的图标，请创建一个[issue](https://github.com/Remix-Design/remixicon/issues)来提交自己的图标设计，并在issue详情中附上自己图标的下载地址，我们会按照 Remix Icon图标风格规范进行审核，通过后将会添加到图标库中，并在更新日志中署上作者的ID。如果你对GitHub不是很熟悉，不清除issue和pull request是什么，也可以直接给我们发邮件 `[email protected]`，内容表述清楚即可。 | ||
| > **Note:** 为了保证每一枚图标的质量，现阶段我们还不接受第三方小伙伴绘制的图标。如果您想要向 Remix Icon 贡献自己设计的图标，请创建一个[issue](https://github.com/Remix-Design/remixicon/issues)来提交自己的图标设计，并在 issue 详情中附上自己图标的下载地址，我们会按照 Remix Icon 图标风格规范进行审核，通过后将会添加到图标库中，并在更新日志中署上作者的 ID。如果你对 GitHub 不是很熟悉，不清除 issue 和 pull request 是什么，也可以直接给我们发邮件 `[email protected]`，内容表述清楚即可。 | ||
| ### 图标申请 | ||
|
|
||
| 如果图标库中缺少某个适合您业务场景的图标，您可以通过创建[issue](https://github.com/Remix-Design/remixicon/issues)的方式进行申请，issue标题格式为：“Icon request: <图标名称>”，并完善issue模板中的相应信息。感谢您提出图标申请，这也是帮助我们完善图标库的一种协作共建方式。 | ||
| 如果图标库中缺少某个适合您业务场景的图标，您可以通过创建[issue](https://github.com/Remix-Design/remixicon/issues)的方式进行申请，issue 标题格式为：“Icon request: <图标名称>”，并完善 issue 模板中的相应信息。感谢您提出图标申请，这也是帮助我们完善图标库的一种协作共建方式。 | ||
|
|
||
| > RemixIcon 主要聚焦于用户界面类的图标，如果 RemixIcon 没有包含您需要的 logo 类的图标，推荐使用 [Simple Icons](https://github.com/simple-icons/simple-icons)，这是一个优秀的 logo 类图标合集。如果您需要的 logo 经常在 UI 端展示，比如社交媒体类图标，也可以发出申请。 | ||
| ### 图标搜索关键词 | ||
|
|
||
| 目前我们的[图标官网](https://remixicon.com)是通过[`tags.json`](https://github.com/Remix-Design/remixicon/blob/master/tags.json)文件来管理搜索关键词的，目前我们已经为所有图标添加了中文关键词，因此我们可以通过中文对图标进行搜索和定位；但是由于关键词不是很健全，所以用户还是经常无法通过某个特定关键词搜索到已有图标。而目前我们还没有一个很好的自动化策略来穷举每一个图标的关键词，只能通过人肉添加的方式来进行完善，希望用户可以通过提[issue](https://github.com/Remix-Design/remixicon/issues) 或者pull request的方式来帮我们一块完善维护 `tags.json`，让搜索功能变得更加好用。 | ||
| 目前我们的[图标官网](https://remixicon.com)是通过[`tags.json`](https://github.com/Remix-Design/remixicon/blob/master/tags.json)文件来管理搜索关键词的，目前我们已经为所有图标添加了中文关键词，因此我们可以通过中文对图标进行搜索和定位；但是由于关键词不是很健全，所以用户还是经常无法通过某个特定关键词搜索到已有图标。而目前我们还没有一个很好的自动化策略来穷举每一个图标的关键词，只能通过人肉添加的方式来进行完善，希望用户可以通过提[issue](https://github.com/Remix-Design/remixicon/issues) 或者 pull request 的方式来帮我们一块完善维护 `tags.json`，让搜索功能变得更加好用。 | ||
|
|
||
| ## 相关项目 | ||
|
|
||
| [RemixIcon-Slides](https://github.com/Remix-Design/RemixIcon-Slides) Remix Icon的PPT版本和Keynote版本。 | ||
| [RemixIcon-Slides](https://github.com/Remix-Design/RemixIcon-Slides) Remix Icon 的 PPT 版本和 Keynote 版本。 | ||
|
|
||
| ## 协议许可 | ||
|
|
||
|
|
||