开源CSS、SVG和Figma UI图标,可用于SVG Sprite、样式化组件、NPM和API。
该图标提供了丰富的支持方法,包括css,svg,tsx,fig,xd,json,xml。
快速入门
通过npm或yarn安装最新版本:
npm i css.gg
yarn add css.gg
使用包管理器
此包包含以下目录和文件:
路径 | 它是什么 |
---|---|
/css | .css icons |
/scss | .scss icons |
/svg | .svg icons |
/tsx | .tsx icons 已设置样式的零部件 |
/all.css | 压缩在一个文件中的所有图标 |
/all.d.ts | 已设置样式的零部件 |
/all.fig | 本地figma文件与 https://css.gg/fig |
/all.js | 导出的列表 |
/all.js.map | 已设置样式的零部件 |
/all.json | 所有图标 *.css, *.svg, *.tsx 包括标记和公共路径 |
/all.scss | 单个SCSS文件中的所有图标,需要先安装 npm i node-sass |
/all.svg | 所有图标的SVG |
/all.xd | 本地XD文件与 https://css.gg/xd |
/all.xml | 所有图标 *.css, *.svg, *.tsx 包括标记和公共路径 |
HTML使用
所有图标
<!-- 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'>
单个图标
<!-- 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'>
CSS @import
所有图标
/* css.gg */
@import url('https://css.gg/css');
/* UNPKG */
@import url('https://unpkg.com/css.gg/icons/all.css');
/* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/all.css');
单个图标
/* css.gg */
@import url('https://css.gg/ {ICONNAME} .css');
/* UNPKG */
@import url('https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css');
/* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css');
调整大小
要调整图标的大小,您只需将css变量“–ggs”的值更改为您喜欢的任何值,如果未指定,它将返回到1或实际大小。
.gg-{ICONNAME} {
/* This value will multiple the actual size */
--ggs: 10;
}
如果您希望所有图标大小相同,可以将变量添加到父级、自定义类、主体级或根级。
:root {
--ggs: 6;
}
着色
默认情况下,所有CSS、SCSS图标都通过使用currentColor属性从父级继承颜色,无论您如何应用您喜欢的任何颜色。
.gg-{ICONNAME} {
color: teal;
}
更多使用方法,请前往 Github 查看。