mirror
/
css.gg
mirror of https://github.com/astrit/css.gg.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

2.1 update readme

This commit is contained in:
astrit 2023-06-23 02:56:31 +02:00
parent 5aedfc86a8
commit 299d073f37
11 changed files with 24929 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

528
README.md
View File

@ -1,80 +1,101 @@
# [Demo](https://css.gg) - [Figma](https://css.gg/fig) - [Twitter](https://twitter.com/astritmalsija) # [YouTube](https://youtube.com/@astrit)     •     [App](https://css.gg)     •     [Figma](https://css.gg/fig)
<br>
## [704 — Pure CSS Icons](https://css.gg)
Open-source CSS, SVG and Figma UI Icons \ Open-source CSS, SVG and Figma UI Icons \
Available in SVG Sprite, styled-components, NPM & API Available in SVG Sprite, styled-components, NPM & API
<br>
## [6031 — Glyphs](https://glyphs.css.gg)
Now also a collection of well organised 6000+ glyphs, easy copy paste and available on the raycast extension.
<br>
## [CSS.GG — Icons & Glyphs on Raycast](https://www.raycast.com/astrit/css-gg)
<br>
<br>
![npm](https://img.shields.io/npm/v/css.gg) ![GitHub last commit](https://img.shields.io/github/last-commit/astrit/css.gg) ![Website](https://img.shields.io/website?url=https%3A%2F%2Fcss.gg) ![npm](https://img.shields.io/npm/dt/css.gg) ![GitHub issues](https://img.shields.io/github/issues/astrit/css.gg) ![GitHub stars](https://img.shields.io/github/stars/astrit/css.gg) ![Twitter Follow](https://img.shields.io/twitter/follow/astritmalsija?label=follow&style=social) ![npm](https://img.shields.io/npm/v/css.gg) ![GitHub last commit](https://img.shields.io/github/last-commit/astrit/css.gg) ![Website](https://img.shields.io/website?url=https%3A%2F%2Fcss.gg) ![npm](https://img.shields.io/npm/dt/css.gg) ![GitHub issues](https://img.shields.io/github/issues/astrit/css.gg) ![GitHub stars](https://img.shields.io/github/stars/astrit/css.gg) ![Twitter Follow](https://img.shields.io/twitter/follow/astritmalsija?label=follow&style=social)
![css.gg](https://css.gg/fav/ogit.png) ![css.gg](https://css.gg/fav/ogit.png)
![css.gg icons](https://css.gg/img/all.png)
# New in 2.0 <br>
#### 🥳 200 New Icons <br>
#### 🚀 SVG Icons
#### 🔥 SVG Sprite # New in 2.1
#### 💅 Styled Components
#### ⚛️ React Local Styled Components #### 🥳 1400 New Icons, in white and black PNG
#### 🦄 Figma Components
#### 🔮 Adobe XD Components #### 🚀 6000+ glyphs available also on [glyphs.css.gg](https://glyphs.css.gg)
# Table of Contents # Table of Contents
* [Get Started](#get-started)
* [HTML include](#html-include) - [Get Started](#get-started)
* [1. All icons](#1-all-icons) - [HTML include](#html-include)
* [2. Single icon](#2-single-icon) - [1. All icons](#1-all-icons)
* [3. Collection](#3-collection) - [2. Single icon](#2-single-icon)
* [4. Markup](#4-markup) - [3. Collection](#3-collection)
* [5. Example](#5-example) - [4. Markup](#4-markup)
* [CSS @import](#css--import) - [5. Example](#5-example)
* [1. All icons](#1-all-icons-1) - [CSS @import](#css--import)
* [2. Single icon](#2-single-icon-1) - [1. All icons](#1-all-icons-1)
* [3. Collection](#3-collection-1) - [2. Single icon](#2-single-icon-1)
* [4. Resizing](#4-resizing) - [3. Collection](#3-collection-1)
* [5. Coloring](#5-coloring) - [4. Resizing](#4-resizing)
* [SVG](#svg) - [5. Coloring](#5-coloring)
* [1. SVG Sprite - Download Path](#1-svg-sprite---download-path) - [SVG](#svg)
* [1.1. Example](#11-example) - [1. SVG Sprite - Download Path](#1-svg-sprite---download-path)
* [2. SVG Single Icon - Download Path](#2-svg-single-icon---download-path) - [1.1. Example](#11-example)
* [2.1. Example - SVG Sprite](#21-example---svg-sprite) - [2. SVG Single Icon - Download Path](#2-svg-single-icon---download-path)
* [2.2. Example - Inline SVG Sprite/Symbol](#22-example---inline-svg-sprite-symbol) - [2.1. Example - SVG Sprite](#21-example---svg-sprite)
* [2.3. Example Single copy/paste icon](#23-example-single-copy-paste-icon) - [2.2. Example - Inline SVG Sprite/Symbol](#22-example---inline-svg-sprite-symbol)
* [3. Encode SVG for CSS](#3-encode-svg-for-css) - [2.3. Example Single copy/paste icon](#23-example-single-copy-paste-icon)
* [3.1. Example - Encoded SVG for CSS icon](#31-example---encoded-svg-for-css-icon) - [3. Encode SVG for CSS](#3-encode-svg-for-css)
* [4. Coloring a SVG icon](#4-coloring-a-svg-icon) - [3.1. Example - Encoded SVG for CSS icon](#31-example---encoded-svg-for-css-icon)
* [4.1. Directly on the icon](#41-directly-on-the-icon) - [4. Coloring a SVG icon](#4-coloring-a-svg-icon)
* [4.2. using class](#42-using-class) - [4.1. Directly on the icon](#41-directly-on-the-icon)
* [JSON - paths](#json---paths) - [4.2. using class](#42-using-class)
* [1. All icons](#1-all-icons-2) - [JSON - paths](#json---paths)
* [2. Single icon](#2-single-icon-2) - [1. All icons](#1-all-icons-2)
* [3. Collection](#3-collection-2) - [2. Single icon](#2-single-icon-2)
* [XML - paths](#xml---paths) - [3. Collection](#3-collection-2)
* [1. All icons](#1-all-icons-3) - [XML - paths](#xml---paths)
* [2. Single icon](#2-single-icon-3) - [1. All icons](#1-all-icons-3)
* [3. Collection](#3-collection-3) - [2. Single icon](#2-single-icon-3)
* [React](#react) - [3. Collection](#3-collection-3)
* [1. Styled Components](#1-styled-components---) - [React](#react)
* [2. Local Single Icon as `styled-component`](#2-local-single-icon-as--styled-component-) - [1. Styled Components](#1-styled-components---)
* [2.1. Copy directly from the page](#21-copy-directly-from-the-page) - [2. Local Single Icon as `styled-component`](#2-local-single-icon-as--styled-component-)
* [2.2. Local Component Example](#22-local-component-example) - [2.1. Copy directly from the page](#21-copy-directly-from-the-page)
* [3. SVG Sprite method](#3-svg-sprite-method) - [2.2. Local Component Example](#22-local-component-example)
* [4. All CSS icons](#4-all-css-icons) - [3. SVG Sprite method](#3-svg-sprite-method)
* [4.1. Single CSS icon](#41-single-css-icon) - [4. All CSS icons](#4-all-css-icons)
* [5. All SCSS icons](#5-all-scss-icons) - [4.1. Single CSS icon](#41-single-css-icon)
* [5.1. Single SCSS icon](#51-single-scss-icon) - [5. All SCSS icons](#5-all-scss-icons)
* [6. Combined import SVG, CSS, SCSS etc.](#6-combined-import-svg-css-scss-etc) - [5.1. Single SCSS icon](#51-single-scss-icon)
* [Design Tools](#design-tools) - [6. Combined import SVG, CSS, SCSS etc.](#6-combined-import-svg-css-scss-etc)
* [1. Figma](#1-figma---httpscssggfig) - [Design Tools](#design-tools)
* [2. Adobe XD](#2-adobe-xd---httpscssggxd) - [1. Figma](#1-figma---httpscssggfig)
* [Contributors](#contributors) - [2. Adobe XD](#2-adobe-xd---httpscssggxd)
* [Donate](#donate) - [Contributors](#contributors)
* [Support](#support) - [Donate](#donate)
* [v.1.0.6 or older](#v106-or-older) - [Support](#support)
* [TODO:](#todo) - [v.1.0.6 or older](#v106-or-older)
- [TODO:](#todo)
# Get Started # Get Started
Install the latest version via npm or yarn Install the latest version via npm or yarn
```shell ```shell
npm i css.gg npm i css.gg
``` ```
```shell ```shell
yarn add css.gg yarn add css.gg
``` ```
@ -82,55 +103,80 @@ yarn add css.gg
Using Package Manager \ Using Package Manager \
This package contains the following directories and files: This package contains the following directories and files:
| Path &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | What it is |
| :----------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ |
| /icons/css | individual \*.css icons |
| /icons/scss | individual \*.scss icons |
| /icons/svg | individual \*.svg icons |
| /icons/tsx | individual \*.tsx icons `styled-components` |
| /icons/icons.css | all icons compressed in a single file |
| /icons/icons.d.ts | `styled-components` |
| /icons/icons.fig | local figma file same as https://css.gg/fig |
| /icons/icons.js | list of exported `styled-components` |
| /icons/icons.js.map | `styled-components` |
| /icons/icons.json | all icons _.css, _.svg, \*.tsx including markup & public path |
| /icons/icons.scss | all icons in a single SCSS file `npm i node-sass` needed |
| /icons/icons.svg | SVG Sprite with all icons |
| /icons/icons.xml | all icons _.css, _.svg, \*.tsx including markup & public path |
| /glyphs/glyphs.json | 6000 glyphs categorized and available on json format |
| Path &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | What it is | <br>
| :-| :-| <br>
| /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 |
# ❤️ Support
If you want to support further development of this project consider becoming a sponsor
<br>
[Github Sponsor — github.com/sponsors/astrit](https://github.com/sponsors/astrit)
<br>
# HTML include # HTML include
#### 1. All icons #### 1. All icons
```html ```html
<!-- css.gg --> <!-- css.gg -->
<link href='https://css.gg/css' rel='stylesheet'> <link href="https://css.gg/css" rel="stylesheet" />
<!-- UNPKG --> <!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'> <link href="https://unpkg.com/css.gg/icons/icons.css" rel="stylesheet" />
<!-- JSDelivr --> <!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'> <link
href="https://cdn.jsdelivr.net/npm/css.gg/icons/icons.css"
rel="stylesheet"
/>
``` ```
#### 2. Single icon #### 2. Single icon
```html ```html
<!-- css.gg --> <!-- css.gg -->
<link href='https://css.gg/ {ICONNAME} .css' rel='stylesheet'> <link href="https://css.gg/ {ICONNAME} .css" rel="stylesheet" />
<!-- UNPKG --> <!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'> <link
href="https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css"
rel="stylesheet"
/>
<!-- JSDelivr --> <!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'> <link
href="https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css"
rel="stylesheet"
/>
``` ```
#### 3. Collection #### 3. Collection
```html ```html
<!-- CSS Format --> <!-- CSS Format -->
<link href='https://css.gg/css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'> <link href="https://css.gg/css?= {ICONNAME} | {ICONNAME}" rel="stylesheet" />
``` ```
#### 4. Markup #### 4. Markup
```html ```html
<i class=" {ICONNAME} "></i> <i class=" {ICONNAME} "></i>
@ -143,21 +189,21 @@ This package contains the following directories and files:
<!-- reference icon using custom tag --> <!-- reference icon using custom tag -->
<gg-icon class=" {ICONNAME} "></gg-icon> <gg-icon class=" {ICONNAME} "></gg-icon>
``` ```
##### 5. Example ##### 5. Example
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
<!-- You can add this link or any other CDN alternatives as mentioned above --> <!-- You can add this link or any other CDN alternatives as mentioned above -->
<link href='https://css.gg/css' rel='stylesheet'> <link href="https://css.gg/css" rel="stylesheet" />
</head>
</head> <body>
<body>
<!-- Using i tag --> <!-- Using i tag -->
<i class="gg- {ICONNAME} "></i> <i class="gg- {ICONNAME} "></i>
@ -166,56 +212,68 @@ This package contains the following directories and files:
<!-- Using custom tag --> <!-- Using custom tag -->
<gg-icon class="gg- {ICONNAME} "></gg-icon> <gg-icon class="gg- {ICONNAME} "></gg-icon>
</body>
</body>
</html> </html>
``` ```
# CSS @import # CSS @import
#### 1. All icons #### 1. All icons
```css ```css
/* css.gg */ /* css.gg */
@import url('https://css.gg/css'); @import url("https://css.gg/css");
/* UNPKG */ /* UNPKG */
@import url('https://unpkg.com/css.gg/icons/all.css'); @import url("https://unpkg.com/css.gg/icons/icons.css");
/* JSDelivr */ /* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/all.css'); @import url("https://cdn.jsdelivr.net/npm/css.gg/icons/icons.css");
``` ```
#### 2. Single icon #### 2. Single icon
```css ```css
/* css.gg */ /* css.gg */
@import url('https://css.gg/ {ICONNAME} .css'); @import url("https://css.gg/ {ICONNAME} .css");
/* UNPKG */ /* UNPKG */
@import url('https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css'); @import url("https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css");
/* JSDelivr */ /* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css'); @import url("https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css");
``` ```
#### 3. Collection #### 3. Collection
```css ```css
/* css.gg */ /* css.gg */
@import url('https://css.gg/css?= {ICONNAME} | {ICONNAME}'); @import url("https://css.gg/css?= {ICONNAME} | {ICONNAME}");
``` ```
#### 4. Resizing #### 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. > 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.
```css ```css
.gg-{ICONNAME} { .gg-{ICONNAME} {
/* This value will multiple the actual size */ /* This value will multiple the actual size */
--ggs: 10; --ggs: 10;
} }
``` ```
> The variable can be added to the parent, custom class,body or root level if you want all icons same size. > The variable can be added to the parent, custom class,body or root level if you want all icons same size.
```css ```css
:root { :root {
--ggs: 6; --ggs: 6;
} }
``` ```
#### 5. Coloring #### 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. 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.
```css ```css
.gg-{ICONNAME} { .gg-{ICONNAME} {
color: teal; color: teal;
@ -223,37 +281,41 @@ By default all the CSS, SCSS icons inherit the color from the parent by using `c
``` ```
# SVG # SVG
#### 1. SVG Sprite - Download Path #### 1. SVG Sprite - Download Path
You can't use these paths, you must download since SVG doesn't allow external sources. You can't use these paths, you must download since SVG doesn't allow external sources.
```html ```html
<!-- css.gg --> <!-- css.gg -->
https://css.gg/svg https://css.gg/svg
<!-- UNPKG --> <!-- UNPKG -->
https://unpkg.com/css.gg/icons/all.svg https://unpkg.com/css.gg/icons/icons.svg
<!-- JSDelivr --> <!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.svg https://cdn.jsdelivr.net/npm/css.gg/icons/icons.svg
``` ```
##### 1.1. Example ##### 1.1. Example
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<!-- First copy all.svg to your project directory -->
<!-- First copy all.svg to your project directory --> <svg><use xlink:href="path/to/icons.svg# {ICONNAME} " /></svg>
<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg> </body>
</body>
</html> </html>
``` ```
#### 2. SVG Single Icon - Download Path #### 2. SVG Single Icon - Download Path
```html ```html
<!-- css.gg --> <!-- css.gg -->
https://css.gg/ {ICONNAME} .svg https://css.gg/ {ICONNAME} .svg
@ -264,69 +326,80 @@ https://unpkg.com/css.gg/icons/svg/ {ICONNAME} .svg
<!-- JSDelivr --> <!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/svg/ {ICONNAME} .svg https://cdn.jsdelivr.net/npm/css.gg/icons/svg/ {ICONNAME} .svg
``` ```
##### 2.1. Example - SVG Sprite ##### 2.1. Example - SVG Sprite
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<!-- First copy all.svg to your project directory -->
<!-- First copy all.svg to your project directory --> <svg><use xlink:href="path/to/icons.svg# {ICONNAME} " /></svg>
<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg> </body>
</body>
</html> </html>
``` ```
##### 2.2. Example - Inline SVG Sprite/Symbol ##### 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 You can add as symbol each or copy the entire file contents at one of the CDN alternatives as mentioned at 2.1
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="{ICONNAME}">
<!-- here goes the icon path -->
</symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" > <!-- Afterward you can call the icons by id like this: -->
<symbol id="{ICONNAME}"> <svg><use xlink:href="# {ICONNAME} " /></svg>
<!-- here goes the icon path --> </body>
</symbol>
</svg>
<!-- Afterward you can call the icons by id like this: -->
<svg><use xlink:href="# {ICONNAME} "/></svg>
</body>
</html> </html>
``` ```
#### 2.3. Example Single copy/paste icon #### 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 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` You can also download a single icon by just visiting `https://css.gg/{ICONNAME}.svg`
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<!-- Just paste it where you want the icon to be -->
<!-- Just paste it where you want the icon to be --> <svg
<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> width="24"
height="24"
</body> 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> </html>
``` ```
#### 3. Encode SVG for CSS #### 3. Encode SVG for CSS
You need to define width and height in order for this to work. You need to define width and height in order for this to work.
Afterwards you can just create a div Afterwards you can just create a div
@ -338,20 +411,21 @@ Afterwards you can just create a div
} }
``` ```
> To encode use this tool \ > To encode use this tool \
https://yoksel.github.io/url-encoder/ > https://yoksel.github.io/url-encoder/
#### 3.1. Example - Encoded SVG for CSS icon #### 3.1. Example - Encoded SVG for CSS icon
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<!-- Using i tag --> <!-- Using i tag -->
<i class="gg- {ICONNAME} "></i> <i class="gg- {ICONNAME} "></i>
@ -360,37 +434,39 @@ https://yoksel.github.io/url-encoder/
<!-- Using custom tag --> <!-- Using custom tag -->
<gg-icon class="gg- {ICONNAME} "></gg-icon> <gg-icon class="gg- {ICONNAME} "></gg-icon>
</body>
</body>
</html> </html>
``` ```
#### 4. Coloring a SVG icon #### 4. Coloring a SVG icon
By default all colors use `currentColor` as value in order to inherit the color from the parent. \ 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. If you wish to change that color you can do the following.
#### 4.1. Directly on the icon #### 4.1. Directly on the icon
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<svg><path fill=" {COLOR} " /></svg> <svg><path fill=" {COLOR} " /></svg>
</body>
</body>
</html> </html>
``` ```
#### 4.2. using class #### 4.2. using class
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
<style> <style>
@ -399,20 +475,19 @@ If you wish to change that color you can do the following.
.custom__color path { .custom__color path {
color: teal; color: teal;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- 2. After that you have to apply the class to the icon --> <!-- 2. After that you have to apply the class to the icon -->
<svg class="custom__color"><path /></svg> <svg class="custom__color"><path /></svg>
</body>
</body>
</html> </html>
``` ```
# JSON - paths # JSON - paths
#### 1. All icons #### 1. All icons
```html ```html
<!-- All attributes --> <!-- All attributes -->
https://css.gg/json https://css.gg/json
@ -424,12 +499,14 @@ https://css.gg/json?=&op=css
https://css.gg/json?=&op=css+markup https://css.gg/json?=&op=css+markup
<!-- UNPKG --> <!-- UNPKG -->
https://unpkg.com/css.gg/icons/all.json https://unpkg.com/css.gg/icons/icons.json
<!-- JSDelivr --> <!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.json https://cdn.jsdelivr.net/npm/css.gg/icons/icons.json
``` ```
#### 2. Single icon #### 2. Single icon
```html ```html
<!-- All attributes --> <!-- All attributes -->
https://css.gg/json?= {ICONNAME} https://css.gg/json?= {ICONNAME}
@ -442,7 +519,9 @@ https://css.gg/json?= {ICONNAME} &op=css+markup
<!-- No CDN Alternatives --> <!-- No CDN Alternatives -->
``` ```
#### 3. Collection #### 3. Collection
```html ```html
<!-- All attributes --> <!-- All attributes -->
https://css.gg/json?= {ICONNAME} | {ICONNAME} https://css.gg/json?= {ICONNAME} | {ICONNAME}
@ -455,8 +534,11 @@ https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css+markup
<!-- No CDN Alternatives --> <!-- No CDN Alternatives -->
``` ```
# XML - paths # XML - paths
#### 1. All icons #### 1. All icons
```html ```html
<!-- All attributes --> <!-- All attributes -->
https://css.gg/xml https://css.gg/xml
@ -468,12 +550,14 @@ https://css.gg/xml?=&op=css
https://css.gg/xml?=&op=css+markup https://css.gg/xml?=&op=css+markup
<!-- UNPKG --> <!-- UNPKG -->
https://unpkg.com/css.gg/icons/all.xml https://unpkg.com/css.gg/icons/icons.xml
<!-- JSDelivr --> <!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.xml https://cdn.jsdelivr.net/npm/css.gg/icons/icons.xml
``` ```
#### 2. Single icon #### 2. Single icon
```html ```html
<!-- All attributes --> <!-- All attributes -->
https://css.gg/xml?= {ICONNAME} https://css.gg/xml?= {ICONNAME}
@ -486,7 +570,9 @@ https://css.gg/xml?= {ICONNAME} &op=css+markup
<!-- No CDN Alternatives --> <!-- No CDN Alternatives -->
``` ```
#### 3. Collection #### 3. Collection
```html ```html
<!-- All attributes --> <!-- All attributes -->
https://css.gg/xml?= {ICONNAME} | {ICONNAME} https://css.gg/xml?= {ICONNAME} | {ICONNAME}
@ -499,72 +585,83 @@ https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css+markup
<!-- No CDN Alternatives --> <!-- No CDN Alternatives -->
``` ```
# React # 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. 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: Note that only `styled-components` icons can be called directly such as:
```js ```js
import { ICONNAME } from 'css.gg' import { ICONNAME } from "css.gg";
``` ```
#### 1. Styled Components 💅 #### 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:
```js
import React from 'react'
import { ICONNAME } from 'css.gg'
export default function() { After you install the package by using `npm i css.gg` or `yarn add css.gg` you can add a single icon like this:
```js
import React from "react";
import { ICONNAME } from "css.gg";
export default function () {
return ( return (
<div> <div>
<ICONNAME /> <ICONNAME />
</div> </div>
) );
} }
``` ```
#### 2. Local Single Icon as `styled-component` #### 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: If you need to download a single `typescript` or `styled-componment` format icon without downloading the entire package just visit the link like this:
```html ```html
https://css.gg/{ICONNAME}.tsx https://css.gg/{ICONNAME}.tsx
``` ```
#### 2.1. Copy directly from the page #### 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. 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.
```html ```html
https://css.gg/{ICONNAME} https://css.gg/{ICONNAME}
``` ```
#### 2.2. Local Component Example #### 2.2. Local Component Example
```js ```js
import React from 'react'; import React from "react";
// local path // local path
import { ICONNAME } from "./ {ICONNAME} " import { ICONNAME } from "./ {ICONNAME} ";
function App() { function App() {
return ( return (
<div> <div>
<ICONNAME /> <ICONNAME />
</div> </div>
); );
} }
export default App; export default App;
``` ```
#### 3. SVG Sprite method #### 3. SVG Sprite method
```js ```js
import React from 'react'; import React from "react";
// Import function from package // Import function from package
import { SVG } from 'css.gg' import { SVG } from "css.gg";
function App() { function App() {
return ( return (
<div> <div>
<svg width="24" height="24">
<svg width="24" height="24"><use xlinkHref={SVG + '#gg-ICONNAME'} /></svg> <use xlinkHref={SVG + "#gg-ICONNAME"} />
</svg>
</div> </div>
); );
} }
@ -573,6 +670,7 @@ export default App;
``` ```
#### 4. All CSS icons #### 4. All CSS icons
```js ```js
import React from 'react'; import React from 'react';
@ -600,6 +698,7 @@ export default App;
``` ```
#### 4.1. Single CSS icon #### 4.1. Single CSS icon
```js ```js
import React from 'react'; import React from 'react';
@ -627,7 +726,9 @@ export default App;
``` ```
#### 5. All SCSS icons #### 5. All SCSS icons
SCSS format to work you need to have `node-sass` installed `npm i node-sass` SCSS format to work you need to have `node-sass` installed `npm i node-sass`
```js ```js
import React from 'react'; import React from 'react';
@ -655,7 +756,9 @@ export default App;
``` ```
#### 5.1. Single SCSS icon #### 5.1. Single SCSS icon
SCSS format to work you need to have `node-sass` installed `npm i node-sass` SCSS format to work you need to have `node-sass` installed `npm i node-sass`
```js ```js
import React from 'react'; import React from 'react';
@ -683,41 +786,39 @@ export default App;
``` ```
#### 6. Combined import SVG, CSS, SCSS etc. #### 6. Combined import SVG, CSS, SCSS etc.
```js ```js
import { SVG, CSS, SCSS, ICONNAME, ICONNAME } from "css.gg";
import { SVG, CSS, SCSS, ICONNAME, ICONNAME } from 'css.gg'
``` ```
# Design Tools # Design Tools
#### 1. Figma - https://css.gg/fig #### 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. All icons are available as components on assets from where you can search for a sigle icon or browse categories.
![css.gg figma](https://css.gg/img/pfig.png) ![css.gg figma](https://css.gg/img/pfig.png)
#### 2. Adobe XD - https://css.gg/xd #### 2. Adobe XD - https://css.gg/xd
All icons are available as components \ All icons are available as components \
![css.gg figma](https://css.gg/img/pxd.png) ![css.gg figma](https://css.gg/img/pxd.png)
# Contributors # Contributors
1. [Astrit](https://github.com/astrit) - Author 1. [Astrit](https://github.com/astrit) - Author
2. [JiangWeixian](https://github.com/jiangWeixian) - Styled Components 2. [JiangWeixian](https://github.com/jiangWeixian) - Styled Components
3. [Lona](https://www.figma.com/@lona) - Figma/SVG Design 3. [Lona](https://www.figma.com/@lona) - Figma/SVG Design
To become a contributor do a [new pull request](https://github.com/astrit/css.gg/pulls). To become a contributor do a [new pull request](https://github.com/astrit/css.gg/pulls).
# Donate
| Source | Link |
| :-------------- | :----------------------------------|
| Github Sponsor | https://github.com/sponsors/astrit |
| Open Collective | https://opencollective.com/css-gg |
| PayPal | https://paypal.me/GjonMalsijaj |
# Support # Support
Discord - https://discord.gg/e7NDKFM
Discord - https://github.com/astrit/css.gg/discussions
# v.1.0.6 or older # v.1.0.6 or older
In order to access older versions you can use one of the provided CDN Alternatives In order to access older versions you can use one of the provided CDN Alternatives
```html ```html
<!-- UNPKG - v.1.0.6 --> <!-- UNPKG - v.1.0.6 -->
https://unpkg.com/browse/css.gg@1.0.6/ https://unpkg.com/browse/css.gg@1.0.6/
@ -727,8 +828,5 @@ https://cdn.jsdelivr.net/npm/css.gg@1.0.6/
``` ```
# TODO: # TODO:
1. CSS Modules
2. Angluar
3. Vue.js
If you would like to contribute feel free to do a [new pull request](https://github.com/astrit/css.gg/pulls). If you would like to contribute feel free to do a [new pull request](https://github.com/astrit/css.gg/pulls).

24608
glyphs/glyphs.json Normal file
View File

File diff suppressed because it is too large Load Diff

0
icons/all.css → icons/icons.css
View File

0
icons/all.d.ts → icons/icons.d.ts vendored
View File

0
icons/all.js → icons/icons.js
View File

0
icons/all.js.map → icons/icons.js.map
View File

0
icons/all.json → icons/icons.json
View File

0
icons/all.scss → icons/icons.scss
View File

0
icons/all.svg → icons/icons.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 406 KiB

After

Width:  |  Height:  |  Size: 406 KiB

0
icons/all.xml → icons/icons.xml
View File

16
index.js
View File

@ -1,11 +1,11 @@
import * as CSS from './icons/all.css' import * as CSS from "./icons/icons.css";
export { CSS } export { CSS };
import * as SCSS from './icons/all.scss' import * as SCSS from "./icons/icons.scss";
export { SCSS } export { SCSS };
import * as SVG from './icons/all.svg' import * as SVG from "./icons/icons.svg";
export { SVG } export { SVG };
export * from './icons/all.js' export * from "./icons/icons.js";
export * from './icons/all.d.ts' export * from "./icons/icons.d.ts";