whoami7 - Manager
:
/
home
/
kckglobal
/
cloud.kckglobal.net
/
modules
/
saas
/
public
/
assets
/
resources
/
svg
/
icons
/
css.gg
/
Upload File:
files >> /home/kckglobal/cloud.kckglobal.net/modules/saas/public/assets/resources/svg/icons/css.gg/README.md
# [Demo](https://css.gg) - [Figma](https://css.gg/fig) - [Twitter](https://twitter.com/astritmalsija) 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](#get-started) * [HTML include](#html-include) * [1. All icons](#1-all-icons) * [2. Single icon](#2-single-icon) * [3. Collection](#3-collection) * [4. Markup](#4-markup) * [5. Example](#5-example) * [CSS @import](#css--import) * [1. All icons](#1-all-icons-1) * [2. Single icon](#2-single-icon-1) * [3. Collection](#3-collection-1) * [4. Resizing](#4-resizing) * [5. Coloring](#5-coloring) * [SVG](#svg) * [1. SVG Sprite - Download Path](#1-svg-sprite---download-path) * [1.1. Example](#11-example) * [2. SVG Single Icon - Download Path](#2-svg-single-icon---download-path) * [2.1. Example - SVG Sprite](#21-example---svg-sprite) * [2.2. Example - Inline SVG Sprite/Symbol](#22-example---inline-svg-sprite-symbol) * [2.3. Example Single copy/paste icon](#23-example-single-copy-paste-icon) * [3. Encode SVG for CSS](#3-encode-svg-for-css) * [3.1. Example - Encoded SVG for CSS icon](#31-example---encoded-svg-for-css-icon) * [4. Coloring a SVG icon](#4-coloring-a-svg-icon) * [4.1. Directly on the icon](#41-directly-on-the-icon) * [4.2. using class](#42-using-class) * [JSON - paths](#json---paths) * [1. All icons](#1-all-icons-2) * [2. Single icon](#2-single-icon-2) * [3. Collection](#3-collection-2) * [XML - paths](#xml---paths) * [1. All icons](#1-all-icons-3) * [2. Single icon](#2-single-icon-3) * [3. Collection](#3-collection-3) * [React](#react) * [1. Styled Components](#1-styled-components---) * [2. Local Single Icon as `styled-component`](#2-local-single-icon-as--styled-component-) * [2.1. Copy directly from the page](#21-copy-directly-from-the-page) * [2.2. Local Component Example](#22-local-component-example) * [3. SVG Sprite method](#3-svg-sprite-method) * [4. All CSS icons](#4-all-css-icons) * [4.1. Single CSS icon](#41-single-css-icon) * [5. All SCSS icons](#5-all-scss-icons) * [5.1. Single SCSS icon](#51-single-scss-icon) * [6. Combined import SVG, CSS, SCSS etc.](#6-combined-import-svg-css-scss-etc) * [Design Tools](#design-tools) * [1. Figma](#1-figma---httpscssggfig) * [2. Adobe XD](#2-adobe-xd---httpscssggxd) * [Contributors](#contributors) * [Donate](#donate) * [Support](#support) * [v.1.0.6 or older](#v106-or-older) * [TODO:](#todo) # Get Started Install the latest version via npm or yarn ```shell npm i css.gg ``` ```shell 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 ```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'> ``` #### 2. Single icon ```html <!-- 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 ```html <!-- CSS Format --> <link href='https://css.gg/css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'> ``` #### 4. Markup ```html <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 ```html <!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 /* 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 /* 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 /* 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. ```css .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. ```css :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. ```css .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. ```html <!-- 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 ```html <!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 ```html <!-- 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 ```html <!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 ```html <!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` ```html <!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 ```css .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 ```html <!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 ```html <!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 ```html <!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 ```html <!-- 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 ```html <!-- 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 ```html <!-- 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 ```html <!-- 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 ```html <!-- 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 ```html <!-- 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: ```js 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: ```js 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: ```html 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. ```html https://css.gg/{ICONNAME} ``` #### 2.2. Local Component Example ```js import React from 'react'; // local path import { ICONNAME } from "./ {ICONNAME} " function App() { return ( <div> <ICONNAME /> </div> ); } export default App; ``` #### 3. SVG Sprite method ```js 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 ```js 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 ```js 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` ```js 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` ```js 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. ```js 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 1. [Astrit](https://github.com/astrit) - Author 2. [JiangWeixian](https://github.com/jiangWeixian) - Styled Components 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). # 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 ```html <!-- 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: 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).
Copyright ©2021 || Defacer Indonesia