内容简介：嗨，我是我们平常找图标往往会去
嗨，我是 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 发布，开源图标字体
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
