feat: write a contributing guide to help users to add their own icon alone

CONTRIBUTING.md

@@ -0,0 +1,22 @@
+# How adding a new set icon
+
+## Prerequisites
+
+You need to have a icomoon account: https://icomoon.io/app/
+For future steps, i recommande to import actual set of keyrune's icons in icomoon.
+
+![import](./contributing/images/import-icon-btn.png)
+
+A model asking for "The glyphs in your SVG font were loaded.
+Use this font's metrics and metadata when exporting fonts?" will appear, click on "Yes".
+
+![modal-import](./contributing/images/import-icon-modal.png)
+
+🎉 Success, you have now all the keyrune's icons in your icomoon project. That will be useful for the next steps when we need to generate the font.
+
+## Summary
+
+1. [Update fonts and svg with the new icon](./contributing/UpdateFonts.md)
+2. [Update codebase to handle the new icon](./contributing/UpdateCodebase.md)
+3. [Generate associated css](./contributing/GenerateCss.md)
+4. [Update the documentation](./contributing/UpdateDocumentation.md)

contributing/GenerateCss.md

@@ -0,0 +1,22 @@
+# Generate CSS
+
+> exemple with the set icon of the set "Fondation" (FDN)
+
+## Steps
+
+Generate the CSS file with the following command:
+
+```bash
+npm run lessmin & sassmin
+```
+or for debug purpose you can run 
+
+```bash
+npm run less & sass
+```
+
+2 files will be generated in the `css` folder: `keyrune.css` and `keyrune.min.css`.
+
+![generate-css](./images/generate-css.png)
+
+Yaay 🎉 you have generate the CSS file! Now you can use the new icon in the website. Follow the [Usage inside README.md](../README.md#usage)

contributing/UpdateCodebase.md

@@ -0,0 +1,27 @@
+# Update Codebase
+
+> exemple with the set icon of the set "Fondation" (FDN)
+
+## Prerequisites
+
+You need to have `lessc` and `sass` installed on your computer.
+
+## Steps
+
+1. Open the `sass/_variables.scss` file in the repository.
+2. Add the new set icon in the `@keyrune-icons` list. (You can see that i add the short code `fdn` and the unicode character `1f31f`)
+    ```diff
+    + ("Foundations", "fdn", "\1f31f"),
+    ```
+
+3. Open the `less/icons.less` file in the repository.
+4. Add the new set icon in the `@keyrune-icons` list. (You can see that i add the short code `fdn` and the unicode character `1f31f`)
+    ```diff
+    + .@{ss-prefix}-fdn:before { content: "\1f31f"; } // Foundation
+    ```
+
+Yaay 🎉 you have update the codebase now everything is ready only one steps to use the new icon
+
+---
+**Go to the next step: [Generate CSS](./GenerateCss.md)**
+---

contributing/UpdateDocumentation.md

@@ -0,0 +1 @@
+# Update existing documentation

contributing/UpdateFonts.md

@@ -0,0 +1,54 @@
+# Update Fonts
+
+> exemple with the set icon of the set "Fondation" (FDN)
+
+## Steps
+
+1. Search for the icon you want to add (from scryfall.com: https://svgs.scryfall.io/sets/fdn.svg) and download it (inspect DOM and copy/paste in a blank file). Save it in a temporary folder in your desktop.
+
+2. On icomoon, click on the "Import Icons" button. Select the previously downloaded icon. It will be added in a "Untilited Set".
+
+    ![import-icon](./images/import-icon.png)
+
+3. Now you need to select all the icons you want to add in the font + the new one. On top right of each section you can find a menu with "Select all" and "Deselect all".
+
+    ![select-all](./images/select-all.png)
+
+4. On the bottom of the page, you can check that you have the right number of icons selected. (Actual number + 1, the new one)
+
+    ![check-number](./images/check-number.png)
+
+5. You can now click on the "Generate Font" button. You will be redirect to a page whith all setting for each icon.
+
+    ![generate-font](./images/generate-font.png)
+
+6. Find your new icon and click on the "smiley" button to search for a unicode character and select it.
+
+    ![icon-settings](./images/icon-settings.png)
+
+    🚧 Be sure to select a character that is not already used in the font.🚧
+
+    You can check how your icon will be displayed in the font by clicking on the "Get code </>" button.
+
+    ![preview-icon](./images/preview-icon.png)
+
+> If you have info about how to determine wich character is free, please add it in this doc here. 🙏
+> What I do is when i have selected my unicode character, i search in all the codebase if it's already used. If not, i use it.
+
+7. You can now donwload the font by clicking on the "Download" button. You get a zip file with all the files needed.
+
+    ![download-font](./images/download-font.png)
+
+8. Unzip the file and copy the `fonts` folder in the keyrune `fonts` folder. Normally you will have the `keyrune.eot`, `keyrune.svg`, `keyrune.ttf`, `keyrune.woff` files.
+
+    ![fonts-folder](./images/fonts-folder.png)
+
+Yaay 🎉 you have update the keyrune font! And have your new icon available.
+
+---
+**Go to the next step: [Update codebase to handle the new icon](./UpdateCodebase.md)**
+---
+
+## Extra steps
+
+One files is missing inside the generated fonts, it's the `keyrune.woff2`. To get it you need to convert the `keyrune.woff` with online tools like [Cloudconvert](https://cloudconvert.com/woff-to-woff2)

less/icons.less

@@ -178,6 +178,7 @@
 .@{ss-prefix}-otj:before { content: "\e9cc"; } // Outlaws of Thunder Junction
 .@{ss-prefix}-blb:before { content: "\e9cd"; } // Bloomburrow
 .@{ss-prefix}-dsk:before { content: "\1f305"; } // Duskmourn: House of Horror
+.@{ss-prefix}-fdn:before { content: "\1f31f"; } // Foundation
 
 /**
  * Command Zone */

sass/_variables.scss

@@ -246,7 +246,7 @@ $keyrune_sets: (
     ("Outlaws of Thunder Junction", "otj", "\e9cc"),
     ("Bloomburrow", "blb", "\e9cd"),
     ("Duskmourn: House of Horror", "dsk", "\1f305"),
-    //
+    ("Foundations", "fdn", "\1f31f")
     // Command zone
     ("Vanguard", "van", "\e655"),
     ("Planechase 2009", "hop", "\e656"),