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

Follow Me

在公众号「前端老王」写文章
在 电鸭社区 找 远程工作
在 Github 发现好项目
在 Twitter 打卡学习，交朋友

全部评论

推荐最新楼层

今天 10:10

已编辑

门头沟学院人工智能

非科班+本科目前正在做AI工程师，说说我这3年。。。

写这篇之前我犹豫了挺久。一方面是怕被人骂，"又一个收割焦虑的转行帖"；另一方面是看了太多用 GPT 套娃出来的「学习路线」文章，AI 味重得让人没法读完。所以这篇全是亲身踩过的坑，时间线、用过的项目、当时的心路全都尽量原样写出来。如果你是大学生在迷茫要不要转 AI，或者已经在转的路上，希望能给点参考。 一个反共识的开场：你以为进 OpenAI 的人都是博士？ 先讲个故事，跟我没关系，但跟所有想转 AI 的人都有关系。 OpenAI 的 Sora 团队（就是搞文生视频那个）一共 13 个人。这里面有两个人特别有意思： Will DePue，密歇根大学计算机系，直接辍学了。17...

_hengheng：我也本，也算是做ai相关，我最开始感觉做ai工程师有多么多么困难，后来发现懂了原理后整体训练完全可以看成一个流程化的内容，开源方案太多了，大多基本都是按着模子在自家业务上做各种操作，就算是大厂的小部门也没那么多资源去训基模，反而更多的是像怎么把技术往业务方向靠近了，不过当前时代如果本科学历没那么好加上自己执行力不是特别强还真不建议走ai工程师这条路，可以试试其他ai的偏业务方向，不然校招不太好杀出来

点赞评论收藏