remixicon 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -10
- package/README_CN.md +19 -8
- package/fonts/.keep 2 +0 -0
- package/fonts/remixicon 2.css +2489 -0
- package/fonts/remixicon 2.eot +0 -0
- package/fonts/remixicon 2.less +2491 -0
- package/fonts/remixicon 2.svg +7351 -0
- package/fonts/remixicon 2.ttf +0 -0
- package/fonts/remixicon 2.woff +0 -0
- package/fonts/remixicon.css +24 -8
- package/fonts/remixicon.eot +0 -0
- package/fonts/remixicon.glyph 2.json +1 -0
- package/fonts/remixicon.glyph.json +1 -1
- package/fonts/remixicon.less +24 -8
- package/fonts/remixicon.module 2.less +2473 -0
- package/fonts/remixicon.svg +50 -2
- package/fonts/remixicon.symbol 2.svg +11 -0
- package/fonts/remixicon.symbol.svg +3 -3
- package/fonts/remixicon.ttf +0 -0
- package/fonts/remixicon.woff +0 -0
- package/fonts/remixicon.woff2 +0 -0
- package/icons/Business/megaphone-fill.svg +1 -0
- package/icons/Business/megaphone-line.svg +1 -0
- package/icons/Business/pass-expired-fill.svg +1 -0
- package/icons/Business/pass-expired-line.svg +1 -0
- package/icons/Business/pass-pending-fill.svg +1 -0
- package/icons/Business/pass-pending-line.svg +1 -0
- package/icons/Business/pass-valid-fill.svg +1 -0
- package/icons/Business/pass-valid-line.svg +1 -0
- package/icons/Communication/emoji-sticker-fill.svg +1 -0
- package/icons/Communication/emoji-sticker-line.svg +1 -0
- package/icons/Development/git-close-pull-request-fill.svg +1 -0
- package/icons/Development/git-close-pull-request-line.svg +1 -0
- package/icons/Device/instance-fill.svg +1 -0
- package/icons/Device/instance-line.svg +1 -0
- package/icons/Logos/blender-fill.svg +1 -0
- package/icons/Logos/blender-line.svg +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,9 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
English | [简体中文](./README_CN.md)
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2200+ icons are all elaborately crafted so that they are born with the gene 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.
|
|
11
|
+
Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2400+ icons are all elaborately crafted so that they are born with the gene 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.
|
|
14
12
|
|
|
15
13
|
[](https://remixicon.com)
|
|
16
14
|
View the full set of Remix Icons at [remixicon.com](https://remixicon.com).
|
|
@@ -34,32 +32,34 @@ Using SVG on the web is as simple as JPEG or PNG. Such as:
|
|
|
34
32
|
```
|
|
35
33
|
|
|
36
34
|
### Webfont Usage
|
|
35
|
+
|
|
37
36
|
> **Note:** You can import Remix Icon with npm install, cdn or download it manually.
|
|
38
37
|
|
|
39
38
|
#### Installation
|
|
39
|
+
|
|
40
40
|
> **Note:** If you'd like to use Remix Icon with a CDN, you can skip this installation step.
|
|
41
41
|
|
|
42
42
|
```
|
|
43
43
|
npm install remixicon --save
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
46
|
```
|
|
49
47
|
import 'remixicon/fonts/remixicon.css'
|
|
50
48
|
```
|
|
49
|
+
|
|
51
50
|
> import CSS to your main.js
|
|
52
51
|
|
|
53
52
|
#### CDN
|
|
53
|
+
|
|
54
54
|
Copy the following code and add it to the <head> tag of your html document.
|
|
55
55
|
|
|
56
56
|
```html
|
|
57
|
-
<link href="https://cdn.jsdelivr.net/npm/remixicon@
|
|
57
|
+
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.0.0/fonts/remixicon.css" rel="stylesheet">
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
> ==**Important Note:**== We've changed our CDN service to jsDelivr from v2.2.0, and the previous CDN service will be terminated on Jan 30, 2020. Please replace your old CDN to the new link above so as not to affect your business. We apologize for the inconvenience.
|
|
61
61
|
>
|
|
62
|
-
> The `@
|
|
62
|
+
> The `@3.0.0` in the CDN link can be changed to any history version we've published.
|
|
63
63
|
|
|
64
64
|
#### Download Manually
|
|
65
65
|
|
|
@@ -73,6 +73,7 @@ Add icon with class name, class name rule: ri-{name}-{style}
|
|
|
73
73
|
<i class="ri-admin-line"></i>
|
|
74
74
|
<i class="ri-admin-fill"></i>
|
|
75
75
|
```
|
|
76
|
+
|
|
76
77
|
> **Note:** We changed the class name prefixes from `remixicon-` to `ri` from v2.0.0;
|
|
77
78
|
|
|
78
79
|
> **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.
|
|
@@ -97,7 +98,7 @@ RemixIcon can be resized by css class integrated by `remixicon.css` . Icons inhe
|
|
|
97
98
|
</div>
|
|
98
99
|
```
|
|
99
100
|
|
|
100
|
-
>
|
|
101
|
+
> You can check the [`remixicon.css`](https://github.com/Remix-Design/RemixIcon/blob/master/fonts/remixicon.css) file for more info and details.
|
|
101
102
|
|
|
102
103
|
### SVG Sprite Usage
|
|
103
104
|
|
|
@@ -108,6 +109,7 @@ Download [`remixicon.symbol.svg`](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/f
|
|
|
108
109
|
<use xlink:href="your-path/remixicon.symbol.svg#ri-admin-fill"></use>
|
|
109
110
|
</svg>
|
|
110
111
|
```
|
|
112
|
+
|
|
111
113
|
```css
|
|
112
114
|
.remix {
|
|
113
115
|
width: 24px;
|
|
@@ -124,7 +126,7 @@ Download [`remixicon.symbol.svg`](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/f
|
|
|
124
126
|
|
|
125
127
|
### Icon Request
|
|
126
128
|
|
|
127
|
-
If there is no suitable icon for your usage scenario, you can create an [issue](https://github.com/Remix-Design/remixicon/issues) with a title of "Icon request:
|
|
129
|
+
If there is no suitable icon for your usage scenario, you can create an [issue](https://github.com/Remix-Design/remixicon/issues) with a title of "Icon request: `<Icon name>`" and fill the issue template.
|
|
128
130
|
|
|
129
131
|
> RemixIcon is mainly focuses 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)
|
|
130
132
|
|
|
@@ -133,8 +135,13 @@ If there is no suitable icon for your usage scenario, you can create an [issue](
|
|
|
133
135
|
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.
|
|
134
136
|
|
|
135
137
|
## Sub-projects
|
|
138
|
+
|
|
136
139
|
[RemixIcon-Slides](https://github.com/Remix-Design/RemixIcon-Slides) PowerPoint and Keynote verison of Remix Icon.
|
|
137
140
|
|
|
138
141
|
## License
|
|
139
142
|
|
|
140
|
-
Remix Icon is
|
|
143
|
+
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.
|
|
144
|
+
|
|
145
|
+
## Support Us
|
|
146
|
+
|
|
147
|
+
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.
|
package/README_CN.md
CHANGED
|
@@ -8,8 +8,6 @@
|
|
|
8
8
|
|
|
9
9
|
[English](./README.md) | 简体中文
|
|
10
10
|
|
|
11
|
-
[暂停更新通知](https://github.com/Remix-Design/RemixIcon/issues/232)
|
|
12
|
-
|
|
13
11
|
Remix Icon 是一套面向设计师和开发者的开源图标库。我们在设计之初将图标风格定义为中性风格,以便适用于各种用户群的项目。与拼凑混搭的图标库不同,Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的,并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。图标以24x24网格为基准,分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目,Enjoy it~
|
|
14
12
|
|
|
15
13
|
[](https://remixicon.com)
|
|
@@ -35,6 +33,7 @@ SVG本身也是一种图片格式,所以您可以像使用其他格式(如JP
|
|
|
35
33
|
```
|
|
36
34
|
|
|
37
35
|
### Webfont 用法
|
|
36
|
+
|
|
38
37
|
> **Note:** Webfont支持npm安装引入、CDN引入或者手动下载的方式引入到项目当中,三选一即可。
|
|
39
38
|
|
|
40
39
|
#### 安装引入
|
|
@@ -48,18 +47,20 @@ npm install remixicon --save
|
|
|
48
47
|
```
|
|
49
48
|
import 'remixicon/fonts/remixicon.css'
|
|
50
49
|
```
|
|
50
|
+
|
|
51
51
|
> 入口文件引入CSS
|
|
52
52
|
|
|
53
53
|
#### CDN引入
|
|
54
|
+
|
|
54
55
|
如果不打算通过安装的方式使用,可以直接复制下面这行代码到您HTML文档的 <head> 标签中,这样就完成了CDN方式的图标引入,简单快捷,推荐方式。
|
|
55
56
|
|
|
56
57
|
```html
|
|
57
|
-
<link href="https://cdn.jsdelivr.net/npm/remixicon@
|
|
58
|
+
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.0.0/fonts/remixicon.css" rel="stylesheet">
|
|
58
59
|
```
|
|
59
60
|
|
|
60
61
|
> ==**重要提醒**==:我们从 v2.2.0 版本开始将我们的 CDN 服务迁移到了 jsDelivr 上,之前的 CDN 链接将在2020年1月30日停止服务,请务必切换您的 CDN 为最新的服务链接,以免影响您的业务,对于由此带来的影响和不便,我们深感抱歉。
|
|
61
62
|
>
|
|
62
|
-
> 上面 CDN 链接中的 `@
|
|
63
|
+
> 上面 CDN 链接中的 `@3.0.0` 可以更改为任何我们曾经发布过的历史版本号。
|
|
63
64
|
|
|
64
65
|
#### 手动下载引入
|
|
65
66
|
|
|
@@ -68,17 +69,19 @@ import 'remixicon/fonts/remixicon.css'
|
|
|
68
69
|
#### 使用
|
|
69
70
|
|
|
70
71
|
引入Remix Icon图标库后,就可以在web项目中使用了,只要在使用图标的时候将图标名称作为类名就可以了。类名规则:ri-{name}-{style}
|
|
72
|
+
|
|
71
73
|
```html
|
|
72
74
|
<i class="ri-admin-line"></i>
|
|
73
75
|
<i class="ri-admin-fill"></i>
|
|
74
76
|
```
|
|
77
|
+
|
|
75
78
|
> **注意:** 从 v2.0.0 开始,我们修改了 class 名称的前缀,从 `remixicon-` 改为了 `ri-`;
|
|
76
79
|
|
|
77
80
|
> **Note:** 您可以到官网 [remixicon.com](https://remixicon.com) 查阅图标对应的名称,然后在名称后添加图标风格,`-line` 代表线性风格,`-fill`代表面型风格。
|
|
78
81
|
|
|
79
82
|
#### 大小
|
|
80
83
|
|
|
81
|
-
|
|
84
|
+
在 `v1.3.1`及以上版本的字体使用方式下,RemixIcon 可以通过 `remixicon.css` 中集成的一些 class 来快捷改变图标的大小。这些 class 使用 `em` 相对大小单位来控制图标尺寸,相对值为图标的父类元素的字体大小值。您也可以通过 `ri-fw` 来使得图标宽度固定,例如在列表场景中使用。class 举例:
|
|
82
85
|
|
|
83
86
|
```html
|
|
84
87
|
<div style="font-size: 24px;">
|
|
@@ -107,6 +110,7 @@ import 'remixicon/fonts/remixicon.css'
|
|
|
107
110
|
<use xlink:href="存放路径/remixicon.symbol.svg#ri-admin-fill"></use>
|
|
108
111
|
</svg>
|
|
109
112
|
```
|
|
113
|
+
|
|
110
114
|
```css
|
|
111
115
|
.remix {
|
|
112
116
|
width: 24px;
|
|
@@ -115,9 +119,10 @@ import 'remixicon/fonts/remixicon.css'
|
|
|
115
119
|
}
|
|
116
120
|
```
|
|
117
121
|
|
|
118
|
-
> **Note:** 上面示例中 `#`
|
|
122
|
+
> **Note:** 上面示例中 `#` 后面的 `ri-admin-fill`可以替换为任何 Remix Icon 图标名称,您可以到官网 [remixicon.com](https://remixicon.com) 查阅图标对应的名称,然后在名称后添加图标风格,`-line` 代表线性风格,`-fill` 代表面型风格。`remixicon.symbol.svg`文件默认是无法预览查看的,只能通过 `<use>` 使用之后查看。
|
|
119
123
|
|
|
120
124
|
## 协作共建
|
|
125
|
+
|
|
121
126
|
> **Note:** 为了保证每一枚图标的质量,现阶段我们还不接受第三方小伙伴绘制的图标。如果您想要向 Remix Icon 贡献自己设计的图标,请创建一个[issue](https://github.com/Remix-Design/remixicon/issues)来提交自己的图标设计,并在issue详情中附上自己图标的下载地址,我们会按照 Remix Icon图标风格规范进行审核,通过后将会添加到图标库中,并在更新日志中署上作者的ID。如果你对GitHub不是很熟悉,不清除issue和pull request是什么,也可以直接给我们发邮件 `jimmy@remixdesign.cn`,内容表述清楚即可。
|
|
122
127
|
|
|
123
128
|
### 图标申请
|
|
@@ -128,10 +133,16 @@ import 'remixicon/fonts/remixicon.css'
|
|
|
128
133
|
|
|
129
134
|
### 图标搜索关键词
|
|
130
135
|
|
|
131
|
-
目前我们的[图标官网](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
|
|
136
|
+
目前我们的[图标官网](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`,让搜索功能变得更加好用。
|
|
132
137
|
|
|
133
138
|
## 相关项目
|
|
139
|
+
|
|
134
140
|
[RemixIcon-Slides](https://github.com/Remix-Design/RemixIcon-Slides) Remix Icon的PPT版本和Keynote版本。
|
|
135
141
|
|
|
136
142
|
## 协议许可
|
|
137
|
-
|
|
143
|
+
|
|
144
|
+
Remix Icon 是基于 [Apache License Version 2.0](https://github.com/Remix-Design/remixicon/blob/master/License) 开源协议的。请放心使用和分享本图标库,您可以查看协议详情来了解详细的开源策略。如果您能在您的产品介绍中署名 Remix Icon,我们将会非常感激,但这并不是必须的。唯一需要注意的是,您不能二次销售本图标库中的图标,否则我们会进行追究。
|
|
145
|
+
|
|
146
|
+
## 支持我们
|
|
147
|
+
|
|
148
|
+
很简单,只需要点一下 GitHub 本项目右上角的小星星就可以了!精神鼓励就是支持我们持续维护本项目的最大动力。请我们喝杯咖啡当然也没问题哈哈~
|
package/fonts/.keep 2
ADDED
|
File without changes
|