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

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

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

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

嗨,我是 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.GG,值得一用


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

查看所有标签

猜你喜欢:

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

Computational Geometry

Computational Geometry

Mark de Berg、Otfried Cheong、Marc van Kreveld、Mark Overmars / Springer / 2008-4-16 / USD 49.95

This well-accepted introduction to computational geometry is a textbook for high-level undergraduate and low-level graduate courses. The focus is on algorithms and hence the book is well suited for st......一起来看看 《Computational Geometry》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试