又一款开源图标库 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

关注我们

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

关注公众号「前端时空」，送你一份前端大礼包。

插件分享：图标工具箱 siyuan-icon-tools v1.0.3

最近尝试写了款插件 siyuan-icon-tools，主要是自己要这个使用需求，最新版 v1.0.3 已发布，siyuan-icon-tools 这款插件基本情况如下：为什么要做这款插件？思源笔记支持在题图底部交界处设置图标，非常美观，但是默认的随机是从所有的图标中进行随机的，不太容易随机到喜欢的图标，很多情况下 ..

b 站前端图标字体引用模板

呃呃呃.zip [图片] 如题，引用字体图标的模板。上图是我查到 eot 里面的图标表，应该是可以用 font-color 改颜色。文件是上面的 zip，把后缀名改成 html 自己看注释就能看到引用字体图标需要的东西。除了 head 里面的图标 svg，没有添加多余任何内容。每一条基本上都是引用一个字体图标必须的代 ..

Solo 导航中的图标自定义添加

Solo 导航中的图标怎样自定义添加？ [图片] 后台应该填写什么 [图片] 图标使用的是什么图标库还有，自定义导航添加后，怎么排序，现在【关于】直接跟在【首页】后面了，想要在导航的最后

Solo 中的图标在哪儿查看

我想要引入其他的图标，需要在样式中写图标的样式，比如 class='icon-link'，icon-link 是链接图标，但是其他的图标参考样式是什么，在哪儿有参照吗？或者 Solo 引入的是什么图标库 SOLO 要自定义个导航，图标应该填写什么 [图片]

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

关于