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

嗨，我是 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 class=" {ICONNAME} "></i>

<!-- reference icon using span -->

<span class=" {ICONNAME} "></span>

<!-- reference icon using div -->

<div class=" {ICONNAME} "></div>

<!-- reference icon using custom tag -->

<gg-icon class=" {ICONNAME} "></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 class="gg- {ICONNAME} "></i>

    <!-- Using div tag  -->

    <div class="gg- {ICONNAME} "></div>

    <!-- Using custom tag  -->

    <gg-icon class="gg- {ICONNAME} "></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，值得一用的更多相关文章

曲线控件我一直用codeproject上的那几个(C++ 100款开源界面库)
Alberl#23楼[楼主] 2013-11-04 11:47 Alberl @baita00引用看了大神的教程,真的不错,学习了很多东西,^_^.这节教程里,大神好像在找曲线控件,是吗?大神有什特殊 ...
(转)12款开源JavaScript库
JavaScipt几乎是所有前端开发人员必会的编程语言,并且,随着各种移动APP的串红,JavaScript还可以用来开发移动应用.除此以外,为了丰富前端/移动开发,有不少开发者推出了各种基于Java ...
C++ 100款开源界面库 (10)
(声明:Alberl以后说到开源库,一般都是指著名的.或者不著名但维护至少3年以上的.那些把代码一扔就没下文的,Alberl不称之为开源库,只称为开源代码.这里并不是贬低,像Alberl前面那个系列的 ...
仿迅雷播放器教程 -- C++ 100款开源界面库 (10)
(声明:Alberl以后说到开源库,一般都是指著名的.或者不著名但维护至少3年以上的.那些把代码一扔就没下文的,Alberl不称之为开源库,只称为开源代码.这里并不是贬低,像Alberl前面那个系 ...
C++100款开源界面库[转]
(声明:Alberl以后说到开源库,一般都是指著名的.或者不著名但维护至少3年以上的.那些把代码一扔就没下文的,Alberl不称之为开源库,只称为开源代码.这里并不是贬低,像Alberl前面那个系列的 ...
一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
1. Android 系统上一款开源的图表库
1. MPAndroidChart MPAndroidChart 是 Android 系统上一款开源的图表库.目前提供线图和饼图,支持选择.缩放和拖放. 一个可以拖动缩放的图表库,包含曲线图.直方图 ...
一步步打造自己的纯CSS单标签图标库
图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...
手把手教你打造一个纯CSS图标库
来,干了这碗安利写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

随机推荐

Java实现蓝桥杯算法提高快速排序
试题算法提高快速排序资源限制时间限制:1.0s 内存限制:256.0MB 问题描述用递归来实现快速排序(quick sort)算法.快速排序算法的基本思路是:假设要对一个数组a进行排序,且a ...
Java实现洛谷 P1601 A+B Problem（高精）
import java.util.*; import java.math.*; public class Main { public static void main(String args[]) { ...
java实现控制台表格
画表格在图形环境中很容易做出漂亮的表格.但在控制台环境中就比较困难了.有的时候可以用一些符号大略地模拟:(word文档中可能不整齐,拷贝到记事本中看) +-------+------+ |abc | ...
关于Synchronized的偏向锁，轻量级锁，重量级锁，锁升级过程，自旋优化，你该了解这些
前言相信大部分开发人员,或多或少都看过或写过并发编程的代码.并发关键字除了Synchronized(如有不懂请移至传送门,关于Synchronized的偏向锁,轻量级锁,重量级锁,锁升级过程,自旋优 ...
初学python笔记
一.关于python ① 由荷兰人Guido van Rossum(龟叔)于1989年圣诞节为打发无聊时间所编写的编程语言. ② python的特点:优雅明确简单.代码量少,运行速度快. 缺点:运 ...
set基本运用
/* set集合基本用法 */ #include<iostream> #include<set> using namespace std; //set<T>a; v ...
程序员实用JDK小工具归纳，工作用得到
在JDK的安用装目录bin下,有一些有非常实用的小工具,可用于分析JVM初始配置.内存溢出异常等问题,我们接下来将对些常用的工具进行一些说明. JDK小工具简介在JDK的bin目录下面有一些小工具, ...
intput子系统
1.按键驱动程序的第一个版本:day07/04 //内核模块的基本要求 init.h module.h LICENSE struct cdev btn_cdev; b ...
VS2019制作的安装包，默认安装到C盘快捷方式无法打开
先讲讲如何制作安装包 1.下载Visual Studio Installer 1)下载链接https://marketplace.visualstudio.com/items?itemName=Vis ...
别人开发三年30k，而我才12K，看完他面试前狂刷的面试题，我惊了
朋友做Java开发三年多的时间了,在老东家勤勤恳恳工作了三年多,工资也就是从刚开始的8K涨到了12K,天天给我吐槽他的工资低.2019年中下旬开始就一直在各种地方找资源,刷面试题,想要“骑驴找马”,所 ...