# PCM Icon Bundle

Use icons inside of Twig templates with ease! Project must be using Tailwind for the colours to work properly.


```php
{{ icon({ icon: 'person' }) }}
```

## Config
Example config:
```yaml
# config/packages/pcm_icon.yaml
pcm_icon:
    directories:
        - '%kernel.project_dir%/public/icons'
    palletes:
        primary:
            fill:                             'fill-primary'
            stroke:                         'stroke-primary'
            fill-hover:                 'hover:fill-primary'
            stroke-hover:             'hover:stroke-primary'
            fill-group-hover:     'group-hover:fill-primary'
            stroke-group-hover: 'group-hover:stroke-primary'
        red:
            fill:                             'fill-red-800'
            stroke:                         'stroke-red-800'
            fill-hover:                 'hover:fill-red-800'
            stroke-hover:             'hover:stroke-red-800'
            fill-group-hover:     'group-hover:fill-red-800'
            stroke-group-hover: 'group-hover:stroke-red-800'
```

`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"`, which is a pallete that uses the project's primary colour. If however you are not using `primary` to set a Tailwind primary colour in your project, you can instead set the default colour of the icon by changing what colour classes the primary pallete uses. EG:
```yaml
primary:
    fill:                             'fill-purple-700'
    stroke:                         'stroke-purple-700'
    fill-hover:                 'hover:fill-purple-700'
    stroke-hover:             'hover:stroke-purple-700'
    fill-group-hover:     'group-hover:fill-purple-700'
    stroke-group-hover: 'group-hover:stroke-purple-700'
```

`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. This will ensure Tailwind classes inside of the config file get compiled.