内容简介：嗨，我是我们平常找图标往往会去
嗨，我是 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 发布，开源图标字体
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
面向对象葵花宝典：思想、技巧与实践
李运华 编著 / 电子工业出版社 / 2015-12 / 69
《面向对象葵花宝典：思想、技巧与实践》系统地讲述了面向对象技术的相关内容，包括面向对象的基本概念、面向对象开发的流程、面向对象的各种技巧，以及如何应用面向对象思想进行架构设计。在讲述相关知识或技术的时候，除了从“是什么”这个角度进行介绍外，更加着重于从“为什么”和“如何用”这两个角度进行剖析，力争让读者做到“知其然，并知其所以然”，从而达到在实践中既能正确又能优秀地应用面向对象的相关技术和技巧。 ......一起来看看 《面向对象葵花宝典：思想、技巧与实践》 这本书的介绍吧!
