77 lines
3.0 KiB
Markdown
77 lines
3.0 KiB
Markdown
# PCM Icon Bundle
|
|
|
|
Use icons inside of Twig templates with ease! Project must be using Tailwind for the colours to work properly.
|
|
|
|
|
|
```php
|
|
{{ pcm_icon({ icon: 'person' }) }}
|
|
```
|
|
|
|
## Config
|
|
Example config:
|
|
```yaml
|
|
# config/packages/pcm_icon.yaml
|
|
pcm_icon:
|
|
default:
|
|
size: 32
|
|
colour: primary
|
|
directories:
|
|
- '%kernel.project_dir%/public/icons'
|
|
colours:
|
|
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'
|
|
```
|
|
# @TODO default options
|
|
|
|
`directories` - Which directories to look in for icons.
|
|
|
|
`colours` - Custom colours to use when colouring icons. Because this extension relies on Tailwind classes for colouring we must specify all the classes. This is a bit awkward, but you can just copy this template replacing COLOUR as appropriate:
|
|
|
|
```yaml
|
|
COLOUR:
|
|
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 colour to use. Defaults to `primary` as it assumes you have a Tailwind colour set up called `primary`. 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 colour 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 to use when the icon is hovered over
|
|
|
|
`classes (string[])` Additional classes to add to the icon. This can cause Tailwind class collisions, so only use it as a last resort.
|
|
|
|
## 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.
|