Add documentation

README.md

@@ -1,9 +1,15 @@
 # PCM Icon Bundle
 
-# WIP DON'T USE YET
+Use icons inside of Twig templates with ease!
 
+```php
+{{ icon({ icon: 'person' }) }}
+```
+
+## Config
 Example config:
-```yml
+```yaml
+# config/packages/pcm_icon.yaml
 pcm_icon:
     directories:
         - '%kernel.project_dir%/public/icons'
@@ -15,27 +21,40 @@ pcm_icon:
             stroke-hover:             'hover:stroke-primary'
             fill-group-hover:     'group-hover:fill-primary'
             stroke-group-hover: 'group-hover:stroke-primary'
-        highlight:
+        red:
-            fill:                             'fill-highlight'
+            fill:                             'fill-red-800'
-            stroke:                         'stroke-highlight'
+            stroke:                         'stroke-red-800'
-            fill-hover:                 'hover:fill-highlight'
+            fill-hover:                 'hover:fill-red-800'
-            stroke-hover:             'hover:stroke-highlight'
+            stroke-hover:             'hover:stroke-red-800'
-            fill-group-hover:     'group-hover:fill-highlight'
+            fill-group-hover:     'group-hover:fill-red-800'
-            stroke-group-hover: 'group-hover:stroke-highlight'
+            stroke-group-hover: 'group-hover:stroke-red-800'
-        white:
-            fill:                             'fill-white'
-            stroke:                         'stroke-white'
-            fill-hover:                 'hover:fill-white'
-            stroke-hover:             'hover:stroke-white'
-            fill-group-hover:     'group-hover:fill-white'
-            stroke-group-hover: 'group-hover:stroke-white'
-        # PALLETE_NAME:
-        #     fill:                             'fill-COLOUR'
-        #     stroke:                         'stroke-COLOUR'
-        #     fill-hover:                 'hover:fill-COLOUR'
-        #     stroke-hover:             'hover:stroke-COLOUR'
-        #     fill-group-hover:     'group-hover:fill-COLOUR'
-        #     stroke-group-hover: 'group-hover:stroke-COLOUR'
 ```
 
-Remember to add './config/packages/*.yaml' as a value in your Tailwind config content array.
+`directories` - Which directories to look in for icons.
+
+`palletes` - Custom colour palletes to use when colouring icons. Because this extension relies on Tailwind classes for colouring we must specify all the classes. This is annoyingly verbose, but you can just copy this template:
+
+```yaml
+PALLETE_NAME:
+    fill:                             'fill-COLOUR'
+    stroke:                         'stroke-COLOUR'
+    fill-hover:                 'hover:fill-COLOUR'
+    stroke-hover:             'hover:stroke-COLOUR'
+    fill-group-hover:     'group-hover:fill-COLOUR'
+    stroke-group-hover: 'group-hover:stroke-COLOUR'
+```
+
+## Options
+
+`icon (string)` **(REQUIRED)** Icon to use, without the `.svg` extension
+
+`title (string)` Optional text to show on hover
+
+`size (int)` Size of the icon in pixels
+
+`colour (string)` Name of the main colour pallete to use. Defaults to `"primary"`, assuming that a pallete with the project's primary colour will exist
+
+`hover (string)` Name of the colour pallete to use when the icon is hovered over
+
+## Reminders
+Remember to add `./config/packages/*.yaml` as a value in your Tailwind config content array if it does not already exist.