Update CONTRIBUTING.md

update

CONTRIBUTING.md

@@ -1,16 +1,62 @@
-# Contribute to the project by adding other icons
+# Developer Workflow
 
-***Attention I remind you that the icons must be in svg format***
+### Make your own `svg` icon
 
-If you like, you can help me expand the number of icons available. Just add to the variable  `var icons`
+- To make an icon in svg format you can use different programs starting from illustrator, inkview, or [Inkscape](https://inkscape.org/).
+- Verify `svg` icons are set properly by using text editor of your choice ([Notepad++](https://notepad-plus-plus.org/), Notepad, or Visual Studio Code).
+- The size of the icons must be **24px by 24px**.
+- The `svg` code must contain **viewbox**. No transform, translate, or scale.
+- Make sure to add color: **#44739e**. Every custom brand icon uses this color.
+- Once done, add the svg file in the folder `icon-svg` found in the root of the repo.
 
-let's take the first string for example:
+Example svg file below:
+
+```svg
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<!-- path d="..." is unique for each icon -->
+
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+   <path
+     style="fill:#44739e"
+     d="..."
+    \>
+  </svg>
+```
+
+
+### Modify `custom-brand-icons.js` file
+
+Add the following entry to the `var icons` variable (list) of the `custom-brand-icons.js` file
+
+Example entry:
 
 ```js
-"Bollard": [0, 0, 32.0, 32.0, "string"]
+"Bollard": [0, 0, 24.0, 24.0, "string"]
 ```
-* `Bollard` = icon name
 
-* `0, 0, 32.0, 32.0` = this data can be recovered from the svg file `transform="scale(0, 0, 32.0, 32.0)` ***If this data is not present in the file you can leave the one indicated by me***
+- `Bollard` = svg icon name used for `phu:`
+- `0, 0, 24.0, 24.0` = this data can be recovered from the svg file `viewBox="0 0 24 24"`
+  -  ***If this data is not present, you can leave the one indicated by me.***
+- `string` = this data can be recovered from the svg file `<path d="M21,12.5 C21,13.33 18.76,...."` In particular you will have to enter only the part of the vector code `"M21,12.5 C21,13.33 18.76"`. 
+  - For an example, take a look at the [icons already inserted](dist/custom-brand-icons.js).
+
+(Optional) In case you want to create your own perfix you can edit the last line of the `custom-brand-icons.js`
+
+```js
+window.customIconsets["yourprefix"] = getIcon;
+```
+
+### Update `README.md`
+- Remember to also update the `README.md` file by inserting the icon's path and the name for `phu:`.
+
 
-* `String` = this data can be recovered from the svg file  `<path d="M21,12.5 C21,13.33 18.76,...."`
+### Contributions and Pull Requests
+After adding your svg icon in `icon-svg`, modifying `custom-brand-icons.js`, and updating `README.md.`
+Open pull requests on the **[dev branch](https://github.com/elax46/custom-brand-icons/pulls)**.