授权协议: Apache
操作系统: 跨平台
收录时间: 2019-05-14
提 交 者: 章萧醇儿

Remix Icon 是一套面向设计师和开发者的开源图标库。图标风格为中性风格,适用于各种用户群体的项目。与拼凑混搭的图标库不同,Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的,并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。图标以24x24网格为基准,分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目

使用说明

基本用法

直接在remixicon.com点击您想要的图标, 该图标将会以SVG矢量格式进行下载。

我们建议设计师小伙伴在需要使用某些图标的时候通过官网搜索下载使用,而不是将一整套图标全部下载放在本地文件夹中进行管理;官网的搜索栏可以帮助您快速定位您想要的图标,而且支持中文关键词搜索,这相比本地文件夹管理图标效率要高很多;最重要的是,官网的图标会持续更新。

SVG本身也是一种图片格式,所以您可以像使用其他格式(如JPG、PNG)的图片文件一样使用SVG文件,例如直接引入的方式:

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

Webfont 用法

Note: Webfont支持npm安装引入、CDN引入或者手动下载的方式引入到项目当中,三选一即可。

安装引入

Note: 如果您打算通过CDN的方式使用 Remix Icon,可以跳过安装引入这一步。

npm install remixicon --save
import 'remixicon/fonts/remixicon.css'

入口文件引入CSS

CDN引入

如果不打算通过安装的方式使用,可以直接复制下面这行代码到您HTML文档的 <head> 标签中,这样就完成了CDN方式的图标引入,简单快捷,推荐方式。

<link href="http://cdn.remixicon.com/releases/v1.2.0/remixicon.css" rel="stylesheet">

手动下载引入

下载保存remixicon.css文件,添加到项目的<head> 标签中即可。

使用

引入Remix Icon图标库后,就可以在web项目中使用了,只要在使用图标的时候将图标名称作为类名就可以了。类名规则:remixicon-{name}-{style}

<i class="remixicon-admin-line"></i>
<i class="remixicon-admin-fill"></i>

Note: 您可以到官网 remixicon.com 查阅图标对应的名称,然后在名称后添加图标风格,-line 代表线性风格,-fill代表面型风格。

SVG Sprite用法

下载 remixicon.symbol.svg 并添加到您的项目目录中,通过 <use> 标签来引用图标,通过css可以自定义图标的大小和颜色等属性,例如:

<svg class='remix'>
  <use xlink:href="存放路径/remixicon.symbol.svg#remixicon-admin-fill"></use>
</svg>
.remix {
  width: 24px;
  height: 24px;
  fill: #333;
}

Note: 上面示例中 # 后面的remixicon-admin-fill可以替换为任何 Remix Icon 图标名称,您可以到官网 remixicon.com 查阅图标对应的名称,然后在名称后添加图标风格,-line 代表线性风格,-fill 代表面型风格。remixicon.symbol.svg文件默认是无法预览查看的,只能通过 <use> 使用之后查看。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

Remix Icon 的相关资讯

Remix Icon 的相关博客

开源图标库Remix Icon

Remix Icon是一套面向设计师和开发者的开源图标库。图标风格定义为中性风格,适用于各种用户群的项目。与拼凑混搭的图标库不同...

用这些免费开源的图标库,为你的项目画龙点睛吧!

精致好看的图标能够为你的项目增色不少,今天 HelloGitHub 就整理了一期图标库精选系列,希望你可以从中找到自己喜欢的图标库...

D2 日报 2019年4月8日

📰 新闻 ➡️ 多款国产浏览器封锁996.ICU,中国程序员惹谁了? www.infoq.cn ➡️ 拒绝996,中国程序员的呼声传到了国外 ww...

《HelloGitHub》第 39 期

兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! <p align="center"> <img src='https://img2018.cnblogs.com/blog/759200...

Element没更新了?基于El的扩展库更新

think-vuele 基于Vue和ElementUI框架进行整合二次开发的一个框架.提供一些elementUI没有的或当时没有的控件.优化了或简化了便...

Remix Icon 的相关问答

还没有任何问答,马上提问

评论 (2)

加载中
有没有商品分类的图标?
2019/06/20 19:10
回复
举报
很漂亮
2019/05/18 09:01
回复
举报
更多评论
2 评论
158 收藏
分享
在线直播报名
返回顶部
顶部