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.

{{ pcm_icon({ icon: 'person' }) }}

Config

Example config:

# 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:

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.