内容简介：嗨，我是我们平常找图标往往会去
嗨，我是 Martin ，也叫老王，今天推荐一款好用的开源图标库。
我们平常找图标往往会去 iconfont
但是今天，我们看了 Martin 的文章之后，就会有一个新的选择—— CSS.GG
Github
https://github.com/astrit/css.gg
star 5751 fork 214 Watch 86
700 + 纯 CSS , SVG & Figma UI Icons 可用在 SVG 精灵图, styled-components , NPM & API
使用方法
通过 npm or yarn 安装最新版本
npm i css.gg
yarn add css.gg
使用该包
该包，包含以下目录和文件:
| Path | What it is |
|---|---|
| /css | individual *.css icons |
| /scss | individual *.scss icons |
| /svg | individual *.svg icons |
| /tsx | individual *.tsx icons styled-components |
| /all.css | all icons compressed in a single file |
| /all.d.ts | styled-components |
| /all.fig | local figma file same as https://css.gg/fig |
| /all.js | list of exported styled-components |
| /all.js.map | styled-components |
| /all.json | all icons *.css, *.svg, *.tsx including markup & public path |
| /all.scss | all icons in a single SCSS file npm i node-sass needed |
| /all.svg | SVG Sprite with all icons |
| /all.xd | local adobe xd file same as https://css.gg/xd |
| /all.xml | all icons *.css, *.svg, *.tsx including markup & public path |
HTML 导入
1. All icons
<!-- css.gg --> <link href='https://css.gg/css' rel='stylesheet'> <!-- UNPKG --> <link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'> <!-- JSDelivr --> <link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>
2. Single icon
<!-- css.gg -->
<link href='https://css.gg/ {ICONNAME} .css' rel='stylesheet'>
<!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>
<!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>
3. Collection
<!-- CSS Format -->
<link href='https://css.gg/css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'>
4. Markup
<i></i> <!-- reference icon using span --> <span></span> <!-- reference icon using div --> <div></div> <!-- reference icon using custom tag --> <gg-icon></gg-icon>
5. Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- You can add this link or any other CDN alternatives as mentioned above -->
<link href='https://css.gg/css' rel='stylesheet'>
</head>
<body>
<!-- Using i tag -->
<i></i>
<!-- Using div tag -->
<div></div>
<!-- Using custom tag -->
<gg-icon></gg-icon>
</body>
</html>
其他方式
-
CSS @import -
SVG -
JSON - paths -
XML - paths -
React -
Design Tools-
Figmahttps://css.gg/fig -
Adobe XDhttps://css.gg/xd
-
关注我们
今天的分享就到这里，点赞、收藏、留言，三连。
记得关注我们哟，送你一份前端大礼包。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 开源图标字体 uiw-iconfont v1.2.6 发布，新增图标
- Remix Icon 1.5.0 发布，开源图标集
- Remix Icon 1.5.0 发布，开源图标集
- 除了iconfont，还有这10个开源SVG图标库
- [译] 除了 iconfont，还有这 10 个开源 SVG 图标库
- uiw-iconfont v1.2.4 发布，开源图标字体
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Blog Design Solutions
Richard Rutter、Andy Budd、Simon Collison、Chris J Davis、Michael Heilemann、Phil Sherry、David Powers、John Oxton / friendsofED / 2006-2-16 / USD 39.99
Blogging has moved rapidly from being a craze to become a core feature of the Internetfrom individuals sharing their thoughts with the world via online diaries, through fans talking about their favori......一起来看看 《Blog Design Solutions》 这本书的介绍吧!
XML、JSON 在线转换
在线XML、JSON转换工具
UNIX 时间戳转换
UNIX 时间戳转换