又一款开源图标库 CSS.GG,值得一用
2024-09-04 03:35:59
嗨,我是 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/figAdobe XD
https://css.gg/xd
关注我们
今天的分享就到这里,点赞、收藏、留言,三连。
记得关注我们哟,送你一份前端大礼包。
最新文章
- Hyper-V2:向VM增加虚拟硬盘
- HTML基础篇之图像热区补充一下图片相对地址的定义
- linux 分区 物理卷 逻辑卷
- web文件操作常见安全漏洞(目录、文件名检测漏洞)
- SNMP详解
- SQL中使用WITH AS提高性能,使用公用表表达式(CTE)简化嵌套SQL
- python获取DBLP数据集
- 基本语法 protocols Category extension
- php mcrypt 完全安装
- cf div2 238 D
- SSH架构
- NET笔试题集
- magento产品eav笔记【持续跟新...】
- HDU 2064 菜鸡第一次写博客
- Json填充到Form中
- 深入浅出分析MySQL MyISAM与INNODB索引原理、优缺点、主程面试常问问题详解
- 文件无法删除java.io.IOException: Unable to delete
- GStreamer 简化 Linux 多媒体开发
- selenium如何屏蔽谷歌浏览器弹出的通知
- DFP算法(转载)
热门文章
- Java实现LeetCode_0009_PalindromeNumber
- JVM 由哪些部分组成?
- [RH134] 12-系统启动
- 手把手带你入门numpy,从此数据处理不再慌【四】
- 曹工说JDK源码(4)--抄了一小段ConcurrentHashMap的代码,我解决了部分场景下的Redis缓存雪崩问题
- [转载]java内存工具VisualVM的简单使用以及与Idea集成
- pc端网站如何自动跳转到移动wap端网站
- HTML5 3D 粒子波浪动画特效DEMO演示
- 面试:在面试中关于List(ArrayList、LinkedList)集合会怎么问呢?你该如何回答呢?
- C++ Primer Plus(一)