No description
Find a file
2025-02-03 11:58:07 +01:00
bin Add some filetype icons 2025-02-03 11:57:35 +01:00
presets Add some filetype icons 2025-02-03 11:57:35 +01:00
public Add some filetype icons 2025-02-03 11:57:35 +01:00
src/icons Add SVG icons 2025-01-24 16:19:47 +01:00
.gitignore Rewrite composer file 2025-01-31 11:37:12 +01:00
composer.json Update composer version 2025-02-03 11:58:07 +01:00
README.md Add some filetype icons 2025-02-03 11:57:35 +01:00

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

Universe 11

Atlas Variety Line Icons

Technical Support

Hashicorp Line Interface Icons

Popular Company Logo Icons

Essential Set 2

Ios Ul

Bigmug Interface Icons

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)