71 lines
2.8 KiB
Markdown
71 lines
2.8 KiB
Markdown
# DEPRECATED in favour of Symfony UX Icon
|
|
|
|
# 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'
|
|
```
|
|
|
|
`default` - Override the default options provided to the bundle.
|
|
|
|
`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** explicitly list all the classes required for Tailwind to render them properly. 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. This can be null, but not an empty string.
|
|
|
|
`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 you are not using `primary` to set a Tailwind primary colour in your project you can change the default colour in the `pcm_icon.yaml` file.
|
|
|
|
`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.
|