diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 00000000..8205c6d9 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,31 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: wendygaoyuan + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. See error... + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Device (please complete the following information):** + - OS: [e.g. OSX 10.14.2] + - Browser& amp;Version [e.g. Chrome 71.0.3578.98(64-bit)] + - Website Version [e.g. 1.2.1] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 00000000..74f0d4c7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,18 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: xiaochunjimmy + +--- + +**Is your feature request about our website? Please describe.** + +**Is your feature request about the Usage? Please describe.** + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. diff --git a/.github/ISSUE_TEMPLATE/icon-request.md b/.github/ISSUE_TEMPLATE/icon-request.md new file mode 100644 index 00000000..f5392097 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/icon-request.md @@ -0,0 +1,17 @@ +--- +name: Icon request +about: Suggest a new icon for Remix Icons +title: '' +labels: '' +assignees: xiaochunjimmy + +--- + + + +## Icon Request + +* Icon name: +* Tags of this icon: +* Use case: +* Screenshots of similar icons: diff --git a/.github/files/birthday2023.svg b/.github/files/birthday2023.svg new file mode 100644 index 00000000..eceff9b9 --- /dev/null +++ b/.github/files/birthday2023.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.github/files/logo-github.svg b/.github/files/logo-github.svg new file mode 100644 index 00000000..4fcc8eda --- /dev/null +++ b/.github/files/logo-github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.github/files/preview.svg b/.github/files/preview.svg new file mode 100644 index 00000000..62d6db38 --- /dev/null +++ b/.github/files/preview.svg @@ -0,0 +1,241 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.github/files/streamline.svg b/.github/files/streamline.svg new file mode 100644 index 00000000..13ad5f14 --- /dev/null +++ b/.github/files/streamline.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml new file mode 100644 index 00000000..2794a317 --- /dev/null +++ b/.github/workflows/npm-publish.yml @@ -0,0 +1,28 @@ +name: Npm Publish + +on: + release: + types: [published] + workflow_dispatch: + +jobs: + build: + + runs-on: ubuntu-22.04 + + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + ref: master + - name: Use Node + uses: actions/setup-node@v3 + with: + node-version: '16.x' + - name: Publish + run: | + npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN + npm publish + env: + CI: true + NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..e43b0f98 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/License b/License new file mode 100644 index 00000000..261eeb9e --- /dev/null +++ b/License @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/README.md b/README.md new file mode 100644 index 00000000..8ff6f8af --- /dev/null +++ b/README.md @@ -0,0 +1,215 @@ +[![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/-Donate-DA6429.svg?style=flat-square)](https://remixicon.com/support-us) + +[![Sponsor](./.github/files/streamline.svg)](https://go.streamlinehq.com/remix-github) + + + +English | [简体中文](./README_CN.md) + +Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2800+ icons are all elaborately crafted so that they are born with the genes of readability, consistency, and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use. + +[![icon demo](./.github/files/preview.svg)](https://remixicon.com) +View the full set of Remix Icons at [remixicon.com](https://remixicon.com). + +## Usage + +### Basic Usage + +Just click the icons you want from [remixicon.com](https://remixicon.com), and then you can download the icons in SVG or PNG format. + +Designers can click the `Copy SVG` button and then press `⌘+V` or `Ctrl+V` to paste the vector graphic into your design tool directly, it is easy and simple. + +> We recommend that designers download or copy icons from our website when needed instead of managing all of them in a local folder. The website's search engine allows you to quickly locate the icon you are looking for and the icons on the website are being continuously updated. +> +> The `Copy SVG` now supports Sketch, Figma, Adobe XD, Adobe Illustrator, Affinity Designer, Affinity Photo, etc. + +Using SVG on the web is as simple as JPEG or PNG. Such as: + +```html + +``` + +### Webfont Usage + +> **Note:** You can import Remix Icon with npm install, cdn or download it manually. + +#### Installation + +> **Note:** If you'd like to use Remix Icon with a CDN, you can skip this installation step. + +``` +npm install remixicon --save +``` + +``` +import 'remixicon/fonts/remixicon.css' +``` + +> import CSS to your main.js + +#### CDN + +Copy the following code and add it to the <head> tag of your HTML document. + +```html + +``` + +> The `@4.3.0` in the CDN link can be changed to any history version we've published. + +#### Download Manually + +Download [`remixicon.css`](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css) file, and add it to the <head> tag of your HTML document. + +#### Use + +Add icon with class name, class name rule: ri-{name}-{style} + +```html + + +``` + +> **Note:** We changed the class name prefixes from `remixicon-` to `ri` from v2.0.0; + +> **Note:** 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. + +#### Sizing + +RemixIcon can be resized by CSS class integrated by `remixicon.css` . Icons inherit the `font-size` of their parent container and with the following classes, you can increase or decrease the size of icons relative to that inherited `font-size`. You can also use `ri-fw` class for a fixed width for icons. For example: + +```html +
+ + + + + + + + + + ... + +
+``` + +> 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/remixicon@2.5.0/fonts/remixicon.symbol.svg) file into your project directory, use icons with the `` element, such as: + +```html + + + +``` + +```css +.remix { + 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 "@remixicon/react"; + +const MyComponent = () => { + return ( + + ); +}; +``` + +### Vue 3 + +#### Installation + +```bash +npm install @remixicon/vue +# or +yarn add @remixicon/vue +# or +pnpm install @remixicon/vue +``` + +#### Usage + +```vue + + + +``` + +### Figma + +[RemixIcon Official Plugin.](https://www.figma.com/community/plugin/1089569154784319246/remixicon) + +## 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 `jimmy@remixdesign.cn`. + +### Icon Request + +If there is no suitable icon for your usage scenario, you can create an [issue](https://github.com/Remix-Design/remixicon/issues) with the title of "Icon request: ``" and fill in the issue template. + +> RemixIcon is mainly focused on user interface icons. If we did not include the logo icons you were looking for, I recommend this icon library - [Simple Icons](https://github.com/simple-icons/simple-icons) + +### Icon Search Keywords + +We use [`tags.json`](https://github.com/Remix-Design/remixicon/blob/master/tags.json) file to manage the search keywords of our [website](https://remixicon.com). But at the moment, we don't have a good automatic method to complete the keywords for each icon. So we hope you can help us to improve the `tags.json` file by creating [issues](https://github.com/Remix-Design/remixicon/issues), sending emails, or "pull request" of tags.json file to make the search engine better. Especially when one of our icons matches your scene but you don't find the icon with your keywords. + +## Sub-projects + +[RemixIcon-Slides](https://github.com/Remix-Design/RemixIcon-Slides) PowerPoint and Keynote version of Remix Icon. + +## 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 mentioned "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 + +It's simple and easy. Just star our project and recommend it to your friends. Your encouragement is the greatest fuel to drive us forward. + +## Follow Us on X + +We are all newcomers on X / Twitter. Feel free to follow us and help enhance our visibility. + +Designer: https://twitter.com/woaichidapi + +Developer: https://twitter.com/wendygaoyuan diff --git a/README_CN.md b/README_CN.md new file mode 100644 index 00000000..14c61941 --- /dev/null +++ b/README_CN.md @@ -0,0 +1,216 @@ +[![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.3.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) 并添加到您的项目目录中，通过 `` 标签来引用图标，通过 css 可以自定义图标的大小和颜色等属性，例如： + +```html + + + +``` + +```css +.remix { + width: 24px; + height: 24px; + fill: #333; +} +``` + +> **Note:** 上面示例中 `#` 后面的 `ri-admin-fill`可以替换为任何 Remix Icon 图标名称，您可以到官网 [remixicon.com](https://remixicon.com) 查阅图标对应的名称，然后在名称后添加图标风格，`-line` 代表线性风格，`-fill` 代表面型风格。`remixicon.symbol.svg`文件默认是无法预览查看的，只能通过 `` 使用之后查看。 + +### React + +#### 安装 + +```bash +npm install @remixicon/react +# or +yarn add @remixicon/react +# or +pnpm install @remixicon/react +``` + +#### 使用 + +```jsx +import { RiHeartFill } from "@remixicon/react"; + +const MyComponent = () => { + return ( + + ); +}; +``` + +### Vue 3 + +#### 安装 + +```bash +npm install @remixicon/vue +# or +yarn add @remixicon/vue +# or +pnpm install @remixicon/vue +``` + +#### 使用 + +```vue + + + +``` + +### Figma + +[官方插件](https://www.figma.com/community/plugin/1089569154784319246/remixicon) + +## 协作共建 + +> **Note:** 为了保证每一枚图标的质量，现阶段我们还不接受第三方小伙伴绘制的图标。如果您想要向 Remix Icon 贡献自己设计的图标，请创建一个[issue](https://github.com/Remix-Design/remixicon/issues)来提交自己的图标设计，并在 issue 详情中附上自己图标的下载地址，我们会按照 Remix Icon 图标风格规范进行审核，通过后将会添加到图标库中，并在更新日志中署上作者的 ID。如果你对 GitHub 不是很熟悉，不清除 issue 和 pull request 是什么，也可以直接给我们发邮件 `jimmy@remixdesign.cn`，内容表述清楚即可。 + +### 图标申请 + +如果图标库中缺少某个适合您业务场景的图标，您可以通过创建[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`，让搜索功能变得更加好用。 + +## 相关项目 + +[RemixIcon-Slides](https://github.com/Remix-Design/RemixIcon-Slides) Remix Icon 的 PPT 版本和 Keynote 版本。 + +## 协议许可 + +Remix Icon 是基于 [Apache License Version 2.0](https://github.com/Remix-Design/remixicon/blob/master/License) 开源协议的。请放心使用和分享本图标库，您可以查看协议详情来了解详细的开源策略。如果您能在您的产品介绍中署名 Remix Icon，我们将会非常感激，但这并不是必须的。唯一需要注意的是，您不能二次销售本图标库中的图标，否则我们会进行追究。 + +## 支持我们 + +很简单，只需要点一下 GitHub 本项目右上角的小星星就可以了！精神鼓励就是支持我们持续维护本项目的最大动力。请我们喝杯咖啡当然也没问题哈哈~ + +## 关注我们 + +我们都是 X / Twitter 上的新人，欢迎关注我们为我们增加一点人气~ + +设计师 - https://twitter.com/woaichidapi + +程序媛 - https://twitter.com/wendygaoyuan diff --git a/package.json b/package.json new file mode 100644 index 00000000..712f0ccc --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "remixicon", + "version": "4.3.0", + "description": "Remix Icon is a set of open source neutral style system symbols elaborately crafted for designers and developers. All of the icons are free to use for both personal and commercial.", + "homepage": "https://remixicon.com", + "keywords": [ + "remixicon", + "remix", + "icon", + "icon library", + "icon pack" + ], + "files": [ + "fonts/", + "icons/", + "License", + "package.json", + "README_CN.md", + "README.md" + ], + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/Remix-Design/remixicon.git" + }, + "bugs": "https://github.com/Remix-Design/remixicon/issues", + "contributors": [ + "Wendy Gao ", + "Jimmy Cheung " + ] +} \ No newline at end of file