@jiangweixian1994/css.gg v2.0.0-beta.0
Demo - Figma - Twitter
Open-source CSS, SVG and Figma UI Icons \ Available in SVG Sprite, styled-components, NPM & API
New in 2.0
🥳 200 New Icons
🚀 SVG Icons
🔥 SVG Sprite
💅 Styled Components
⚛️ React Local Styled Components
🦄 Figma Components
🔮 Adobe XD Components
Table of Contents
- Get Started
- HTML include
- CSS @import
- SVG
- JSON - paths
- XML - paths
- React
- Design Tools
- Contributors
- Donate
- Support
- v.1.0.6 or older
- TODO:
Get Started
Install the latest version via npm or yarn
npm i css.gg
yarn add css.gg
Using Package Manager \ This package contains the following directories and files:
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 include
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
1. All icons
/* 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');
2. Single icon
/* 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');
3. Collection
/* css.gg */
@import url('https://css.gg/css?= {ICONNAME} | {ICONNAME}');
4. Resizing
To resize an icon you just need to change the value of a css variable "--ggs" to any value you like if not specified it falls back to 1 or the actual size.
.gg-{ICONNAME} { /* This value will multiple the actual size */ --ggs: 10; }
The variable can be added to the parent, custom class,body or root level if you want all icons same size.
:root { --ggs: 6; }
5. Coloring
By default all the CSS, SCSS icons inherit the color from the parent by using
currentColor
attribute how ever you can apply any color you like..gg-{ICONNAME} { color: teal; }
SVG
1. SVG Sprite - Download Path
You can't use these paths, you must download since SVG doesn't allow external sources.
<!-- css.gg -->
https://css.gg/svg
<!-- UNPKG -->
https://unpkg.com/css.gg/icons/all.svg
<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.svg
1.1. 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>
</head>
<body>
<!-- First copy all.svg to your project directory -->
<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg>
</body>
</html>
2. SVG Single Icon - Download Path
<!-- css.gg -->
https://css.gg/ {ICONNAME} .svg
<!-- UNPKG -->
https://unpkg.com/css.gg/icons/svg/ {ICONNAME} .svg
<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/svg/ {ICONNAME} .svg
2.1. Example - SVG Sprite
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- First copy all.svg to your project directory -->
<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg>
</body>
</html>
2.2. Example - Inline SVG Sprite/Symbol
You can add as symbol each or copy the entire file contents at one of the CDN alternatives as mentioned at 2.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" >
<symbol id="{ICONNAME}">
<!-- here goes the icon path -->
</symbol>
</svg>
<!-- Afterward you can call the icons by id like this: -->
<svg><use xlink:href="# {ICONNAME} "/></svg>
</body>
</html>
2.3. Example Single copy/paste icon
You can go to https://css.gg/{ICONNAME}
and copy the SVG icon directy and paste it on your project. \
You can also download a single icon by just visiting https://css.gg/{ICONNAME}.svg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Just paste it where you want the icon to be -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5" /> <path d="M6 7H18V11H6V7Z" fill="currentColor" /> </svg>
</body>
</html>
3. Encode SVG for CSS
You need to define width and height in order for this to work. Afterwards you can just create a div
.gg-{ICONNAME} {
background-image:
url("data:image/svg+xml,<svg></svg>");
}
To encode use this tool \ https://yoksel.github.io/url-encoder/
3.1. Example - Encoded SVG for CSS icon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
4. Coloring a SVG icon
By default all colors use currentColor
as value in order to inherit the color from the parent. \
If you wish to change that color you can do the following.
4.1. Directly on the icon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg><path fill=" {COLOR} " /></svg>
</body>
</html>
4.2. using class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1. You define the CSS class like this: */
.custom__color path {
color: teal;
}
</style>
</head>
<body>
<!-- 2. After that you have to apply the class to the icon -->
<svg class="custom__color"><path /></svg>
</body>
</html>
JSON - paths
1. All icons
<!-- All attributes -->
https://css.gg/json
<!-- Only Style -->
https://css.gg/json?=&op=css
<!-- Style & Markup -->
https://css.gg/json?=&op=css+markup
<!-- UNPKG -->
https://unpkg.com/css.gg/icons/all.json
<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.json
2. Single icon
<!-- All attributes -->
https://css.gg/json?= {ICONNAME}
<!-- Only Style -->
https://css.gg/json?= {ICONNAME} &op=css
<!-- Style & Markup -->
https://css.gg/json?= {ICONNAME} &op=css+markup
<!-- No CDN Alternatives -->
3. Collection
<!-- All attributes -->
https://css.gg/json?= {ICONNAME} | {ICONNAME}
<!-- Only Style -->
https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css
<!-- Style & Markup -->
https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css+markup
<!-- No CDN Alternatives -->
XML - paths
1. All icons
<!-- All attributes -->
https://css.gg/xml
<!-- Only Style -->
https://css.gg/xml?=&op=css
<!-- Style & Markup -->
https://css.gg/xml?=&op=css+markup
<!-- UNPKG -->
https://unpkg.com/css.gg/icons/all.xml
<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.xml
2. Single icon
<!-- All attributes -->
https://css.gg/xml?= {ICONNAME}
<!-- Only Style -->
https://css.gg/xml?= {ICONNAME} &op=css
<!-- Style & Markup -->
https://css.gg/xml?= {ICONNAME} &op=css+markup
<!-- No CDN Alternatives -->
3. Collection
<!-- All attributes -->
https://css.gg/xml?= {ICONNAME} | {ICONNAME}
<!-- Only Style -->
https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css
<!-- Style & Markup -->
https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css+markup
<!-- No CDN Alternatives -->
React
On a React project you can include a single icon as CSS, Styled Component, SCSS, SVG or call the contents using .json or .xml files.
\
Note that only styled-components
icons can be called directly such as:
import { ICONNAME } from 'css.gg'
1. Styled Components 💅
After you install the package by using npm i css.gg
or yarn add css.gg
you can add a single icon like this:
import React from 'react'
import { ICONNAME } from 'css.gg'
export default function() {
return (
<div>
<ICONNAME />
</div>
)
}
2. Local Single Icon as styled-component
If you need to download a single typescript
or styled-componment
format icon without downloading the entire package just visit the link like this:
https://css.gg/{ICONNAME}.tsx
2.1. Copy directly from the page
If you don't want to download at all but just copy paste visit the icon page and you have a special tab for it.
https://css.gg/{ICONNAME}
2.2. Local Component Example
import React from 'react';
// local path
import { ICONNAME } from "./ {ICONNAME} "
function App() {
return (
<div>
<ICONNAME />
</div>
);
}
export default App;
3. SVG Sprite method
import React from 'react';
// Import function from package
import { SVG } from 'css.gg'
function App() {
return (
<div>
<svg width="24" height="24"><use xlinkHref={SVG + '#gg-ICONNAME'} /></svg>
</div>
);
}
export default App;
4. All CSS icons
import React from 'react';
// Import function from package
import { CSS } from 'css.gg'
function App() {
return (
<div>
<!-- Using i tag -->
<i className="gg- {ICONNAME} "></i>
<!-- Using div tag -->
<div className="gg- {ICONNAME} "></div>
<!-- Using custom tag -->
<gg-icon className="gg- {ICONNAME} "></gg-icon>
</div>
);
}
export default App;
4.1. Single CSS icon
import React from 'react';
// Import path from package
import 'css.gg/icons/css/ {ICONNAME} .css'
function App() {
return (
<div>
<!-- Using i tag -->
<i className="gg- {ICONNAME} "></i>
<!-- Using div tag -->
<div className="gg- {ICONNAME} "></div>
<!-- Using custom tag -->
<gg-icon className="gg- {ICONNAME} "></gg-icon>
</div>
);
}
export default App;
5. All SCSS icons
SCSS format to work you need to have node-sass
installed npm i node-sass
import React from 'react';
// Import function from package
import { SCSS } from 'css.gg'
function App() {
return (
<div>
<!-- Using i tag -->
<i className="gg- {ICONNAME} "></i>
<!-- Using div tag -->
<div className="gg- {ICONNAME} "></div>
<!-- Using custom tag -->
<gg-icon className="gg- {ICONNAME} "></gg-icon>
</div>
);
}
export default App;
5.1. Single SCSS icon
SCSS format to work you need to have node-sass
installed npm i node-sass
import React from 'react';
// Import path from package
import 'css.gg/icons/scss/ {ICONNAME} .scss'
function App() {
return (
<div>
<!-- Using i tag -->
<i className="gg- {ICONNAME} "></i>
<!-- Using div tag -->
<div className="gg- {ICONNAME} "></div>
<!-- Using custom tag -->
<gg-icon className="gg- {ICONNAME} "></gg-icon>
</div>
);
}
export default App;
6. Combined import SVG, CSS, SCSS etc.
import { SVG, CSS, SCSS, ICONNAME, ICONNAME } from 'css.gg'
Design Tools
1. Figma - https://css.gg/fig
All icons are available as components on assets from where you can search for a sigle icon or browse categories.
2. Adobe XD - https://css.gg/xd
All icons are available as components \
Contributors
- Astrit - Author
- JiangWeixian - Styled Components
- Lona - Figma/SVG Design
To become a contributor do a new pull request.
Donate
Source | Link |
---|---|
Github Sponsor | https://github.com/sponsors/astrit |
Open Collective | https://opencollective.com/css-gg |
PayPal | https://paypal.me/GjonMalsijaj |
Support
Discord - https://discord.gg/e7NDKFM
v.1.0.6 or older
In order to access older versions you can use one of the provided CDN Alternatives
<!-- UNPKG - v.1.0.6 -->
https://unpkg.com/browse/css.gg@1.0.6/
<!-- JSDelivr - v.1.0.6 -->
https://cdn.jsdelivr.net/npm/css.gg@1.0.6/
TODO:
- CSS Modules
- Angluar
- Vue.js
If you would like to contribute feel free to do a new pull request.
3 years ago
3 years ago