feat: auto-load custom svg sprites from assets folder (#79)

BREAKING CHANGE: Build-in icons are prefixed with `gdoc_` now. If you use build-in icons in e.g. menus you have to rename these references!

exampleSite/content/shortcodes/icon.md

@@ -0,0 +1,15 @@
+Simple shortcode to include icons from SVG sprites outside of menus.
+
+```tpl
+{{</* icon "thumbs-up" */>}}
+```
+
+**Example:**
+
+| Result                     | Usage                            |
+| -------------------------- | -------------------------------- |
+| {{< icon "thumbs-up" >}}   | `{{</* icon "thumbs-up" */>}}`   |
+| {{< icon "thumbs-down" >}} | `{{</* icon "thumbs-down" */>}}` |
+| {{< icon "laugh" >}}       | `{{</* icon "laugh" */>}}`       |
+| {{< icon "lemon" >}}       | `{{</* icon "lemon" */>}}`       |
+| {{< icon "moon" >}}        | `{{</* icon "moon" */>}}`        |

exampleSite/content/shortcodes/includes.md

@@ -8,16 +8,16 @@ Include shortcode can include files of different types. By specifying a language
 
 Attributes:
 
-<!-- prettier-ignore -->
-| Name | Usage | default |
-|---|---|---|
-|  file | path to the included file relative to the hugo root | empty value |
-| language* | language for [syntax highlighting](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages)  | empty value |
-| markdown | included file is markdown | false |
-| options | highlighting [options](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode) | linenos=table |
+| Name       | Usage                                                                                                                               | default       |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| file       | path to the included file relative to the hugo root                                                                                 | empty value   |
+| language\* | language for [syntax highlighting](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages) | empty value   |
+| markdown   | included file is markdown                                                                                                           | false         |
+| options    | highlighting [options](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode)                               | linenos=table |
 
 \* if not set, the content will be rendered as plain HTML
 
+<!-- prettier-ignore -->
 ### Include \*.yml file with options
 
 ```tpl

exampleSite/content/usage/icons.md

@@ -0,0 +1,52 @@
+---
+title: Icons
+---
+
+<!-- spellchecker-disable -->
+
+{{< toc >}}
+
+<!-- spellchecker-enable -->
+
+## Custom icons
+
+The only supported source for custom icons are SVG sprites. Some icon frameworks provides ready to use sprites e.g. FontAwesome. If the framework don't provide sprites, you can create your own from raw SVG icons. There are a lot of tools available to create sprites, please choose one that fits your need. One solution could be [svgsprit.es](https://svgsprit.es/).
+
+Regardless of which tool (or existing sprite) you choose, there are a few requirements that must be met:
+
+1. The sprite must be a valid **SVG** file.
+2. You have to ensure to **hide the sprite**. Apply the predefined class `svg-sprite` or `hidden` to the root element of your sprite or add a small piece of inline CSS e.g. `style="display: none;"`.
+3. Save the sprite to the folder `assets/sprites` right beside your `content` folder.
+
+The result of a valid minimal SVG sprite file could look like this:
+
+```XML
+<svg class="svg-sprite" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol viewBox="-2.29 -2.29 28.57 28.57" id="arrow_back" xmlns="http://www.w3.org/2000/svg">
+        <path d="M24 10.526v2.947H5.755l8.351 8.421-2.105 2.105-12-12 12-12 2.105 2.105-8.351 8.421H24z"/>
+    </symbol>
+</svg>
+```
+
+**Example:**
+
+FontAwesome provides three pre-build sprites included in the regular Web download pack, `sprites/brands.svg`, `sprites/regular.svg` and `sprites/solid.svg`. Choose your sprite to use and copy it to your projects root directory into `assets/sprites`, right beside your `content` folder. The result should look like this:
+
+```Bash
+my_projcet/
+├── assets
+│   └── sprites
+│       └── regular.svg
+├── config.yaml
+├── content
+│   ├── _index.md
+│   ├── ...
+```
+
+That's it! The theme will auto-load all available SVG sprites provided in the assets folder. To use the icons e.g. in the [bundle menu](/usage/menus/#bundle-menu), you need to lookup the id of the icon. An example would be `thumbs-up` {{< icon "thumbs-up" >}}. There is also a [shortcode](/shortcodes/icon/) available.
+
+## Build-in icons
+
+The theme bundles just a small set of hand crafted icons.
+
+{{< sprites >}}

exampleSite/content/usage/menus.md

@@ -62,7 +62,7 @@ main:
         ref: "/level-2/level-2-2"
 ```
 
-As an advantage you can add icons to your menu entries e.g. `icon: "notification"`.
+As an advantage you can add [icons](/usage/icons/) to your menu entries e.g. `icon: "notification"`.
 
 [![Example bundle menu](/media/bundle-menu.png)](/media/bundle-menu.png)