又一款开源图标库 CSS.GG，值得一用

栏目: IT技术 · 发布时间: 5年前

内容简介：嗨，我是我们平常找图标往往会去

嗨，我是 Martin ，也叫老王，今天推荐一款好用的开源图标库。

我们平常找图标往往会去 iconfont

又一款开源图标库 CSS.GG，值得一用

但是今天，我们看了 Martin 的文章之后，就会有一个新的选择—— CSS.GG

又一款开源图标库 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
- Figma https://css.gg/fig
- Adobe XD https://css.gg/xd

关注我们

今天的分享就到这里，点赞、收藏、留言，三连。

记得关注我们哟，送你一份前端大礼包。

又一款开源图标库 CSS.GG，值得一用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

从0到1

彼得·蒂尔、布莱克·马斯特斯 / 高玉芳 / 中信出版股份有限公司 / 2015-1-1 / CNY 45.00

图书简介： http://v.youku.com/v_show/id_XOTA0NjcyMzE2.html?wm=3333_2001 硅谷创投教父、PayPal创始人作品，斯坦福大学改变未来的一堂课，为世界创造价值的商业哲学。在科技剧烈改变世界的今天，想要成功，你必须在一切发生之前研究结局。你必须找到创新的独特方式，让未来不仅仅与众不同，而且更加美好。从0到1，......一起来看看《从0到1》这本书的介绍吧!

码农工具