bin | ||
presets | ||
public | ||
src/icons | ||
.gitignore | ||
composer.json | ||
README.md |
KT-Color-Scheme
Idea
Try to harmonize theme over personal application and centralize all ressource in single repo.
Preview
For demo I use PicoCSS for HTML rendering.
index.html
page contain example of CSS rule.
icons.php
page contain all SVG icon.
Icons
My icons try to follow specifications:
- Size: 48px
- Viewport : 0 0 48 48
- No predefined color
- Circular or square shapes should be 48x48
- Rectangular shapes should be 40x48
- Stroke 4px
- Align center and middle
- SVG file must have ID
I use many icons from other set, see sources section bellow.
The original icon can be found in src
dir, on public/asssets/icons/
the SVG file must be minified.
Use icons
Use sprite
Include the SVG sprite file in your HTML head :
<link rel="preload" href="assets/sprites/full.svg" as="image" type="image/svg+xml">
Add this in your HTML file :
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-caution</title>
<use href="assets/sprites/full.svg#admonition-caution"></use>
</svg>
Use inline
Just copy content of icon in your html file.
<svg id="admonition-caution" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<path d="M7.254.545L.545 7.255v9.49l6.71 6.71h9.49l6.71-6.71v-9.49l-6.71-6.71h-9.49zm.79 1.91h7.911l5.59 5.59v7.91l-5.59 5.59h-7.91l-5.59-5.59V8.046l5.59-5.59zm3 3.815v7.64h1.912V6.27h-1.912zm0 9.55v1.91h1.912v-1.91h-1.912z"
transform="translate(-1.142 -1.142) scale(2.09516)"/>
</svg>
Use like other img file
<img class="svg-icon" src="assets/icons/admonition-caution.svg"
alt="admonition-caution"
aria-hidden="true"
focusable="false"
role="presentation"
/>
You can copy/paste code directly from icons.php
page
Sprite building
When you add new icon in public/assets/icons/
, you need rebuilding sprite file.
You can use bash script bin/build.sh
for generating all sprite :
- admonition.svg | all icons with admonition prefix
- file.svg | all icons with file prefix
- folder.svg | all icons with folder prefix
- full.svg | all icons
- hardware.svg | all icons with hardware prefix
- logo.svg | all icons with logo prefix
- ui.svg | all icons with ui prefix
Or you can use svg_sprite_generator.(php|sh) in bin
dir.
Usage :
bash svg_sprite_generator.sh -d <directory> | -f <file_list> -o <output_file>
Or
php svg_sprite_generator.php -d <directory> | -f <file_list> -o <output_file>
Example with bash:
For generate one file name fullSet.svg contain all icons in directory public/assets/icons
bash bin/svg_sprite_generator.sh -d public/assets/icons -o public/assets/sprites/fullSet.svg
You can use preset for generating specific type of icons. For generate one file name ui.svg contain all icons with prefix ui in directory public/assets/icons
bash bin/svg_sprite_generator.sh -f presets/ui.list -o public/assets/sprites/ui.svg
You can make your own preset, just create file with custom-
prefix in presets folder, edit and add list of icons you want (one icon by line).
Include theme in other project
Use composer
composer config repositories.kt-color-scheme vcs https://forge.leslibres.org/knah-tsaeb/kt-color-scheme
composer require --dev knah-tsaeb/kt-color-scheme:^0.1.0
Sources
SVG icons
Icons are adapted from :
Industrial Sharp UI Icons
- Author: Siemens
- License: MIT License
- Collection: Industrial Sharp UI Icons
Universe 11
- Author: SVG repo
- License: CCO License
- Collection: Universe 11
Atlas Variety Line Icons
- Author: Vectopus
- License: MIT License
- Collection: Atlas Variety Line Icons
Technical Support
- Author: SVG repo
- License: CCO License
- Collection: Technical Support
Hashicorp Line Interface Icons
- Author: SVG repo
- License: MLP License
- Collection: Hashicorp Line Interface Icons
Popular Company Logo Icons
- Author: Unknown
- License: Logo License
- Collection: Popular Company Logo Icons
Essential Set 2
- Author: SVG repo
- License: CCO License
- Collection: Essential Set 2 Collection
Ios Ul
- Author: Unknown
- License: CCO License
- Collection: Ios Ul
Bigmug Interface Icons
- Author: Catalin Fertu
- License: CC BY License
- Collection: Bigmug Interface Icons
Libre Variety Filled Icons
- Author: Diemen Design
- License: MIT License
- Collection: Libre Variety Filled Icons
Idea/todo
- Remove PicoCSS and make personal example (website, gallery, bookmark.....)
- Make small framework with sementic approch (limit copy/paste on each project)