Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c1ac0faf78 | |||
| 1d91b50c32 | |||
| 9248b51908 | |||
| 0e2ee19f8f | |||
| 6e357ee8b7 |
22
README.md
22
README.md
@@ -33,11 +33,12 @@ pcm_icon:
|
|||||||
fill-group-hover: 'group-hover:fill-red-800'
|
fill-group-hover: 'group-hover:fill-red-800'
|
||||||
stroke-group-hover: 'group-hover:stroke-red-800'
|
stroke-group-hover: 'group-hover:stroke-red-800'
|
||||||
```
|
```
|
||||||
# @TODO default options
|
|
||||||
|
`default` - Override the default options provided to the bundle.
|
||||||
|
|
||||||
`directories` - Which directories to look in for icons.
|
`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:
|
`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
|
```yaml
|
||||||
COLOUR:
|
COLOUR:
|
||||||
@@ -51,22 +52,13 @@ COLOUR:
|
|||||||
|
|
||||||
## Options
|
## Options
|
||||||
|
|
||||||
`icon (string)` **(REQUIRED)** Icon to use, without the `.svg` extension
|
`icon (string)` **(REQUIRED)** Icon to use, without the `.svg` extension.
|
||||||
|
|
||||||
`title (string)` Optional text to show on hover
|
`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
|
`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:
|
`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.
|
||||||
```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
|
`hover (string)` Name of the colour to use when the icon is hovered over
|
||||||
|
|
||||||
|
|||||||
@@ -7,6 +7,14 @@ services:
|
|||||||
public: true
|
public: true
|
||||||
class: Pcm\IconBundle\Twig\Extension\IconExtension
|
class: Pcm\IconBundle\Twig\Extension\IconExtension
|
||||||
|
|
||||||
Pcm\IconBundle\Twig\Functions\IconExtension:
|
Pcm\IconBundle\Twig\Extension\IconExtension:
|
||||||
public: false
|
public: false
|
||||||
alias: pcm_icon.icon_extension
|
alias: pcm_icon.icon_extension
|
||||||
|
|
||||||
|
Pcm\IconBundle\Twig\Runtime\IconRuntime:
|
||||||
|
tags:
|
||||||
|
- { name: twig.runtime }
|
||||||
|
arguments:
|
||||||
|
$defaultOptions: '%pcm.icon_bundle.default_options%'
|
||||||
|
$directories: '%pcm.icon_bundle.directories%'
|
||||||
|
$colours: '%pcm.icon_bundle.colours%'
|
||||||
|
|||||||
@@ -23,10 +23,8 @@ class PcmIconExtension extends Extension
|
|||||||
$configuration = new Configuration();
|
$configuration = new Configuration();
|
||||||
$config = $this->processConfiguration($configuration, $configs);
|
$config = $this->processConfiguration($configuration, $configs);
|
||||||
|
|
||||||
$definition = $container->getDefinition('pcm_icon.icon_extension');
|
$container->setParameter('pcm.icon_bundle.default_options', $config['default']);
|
||||||
|
$container->setParameter('pcm.icon_bundle.directories', $config['directories']);
|
||||||
$definition->addArgument($config['default']);
|
$container->setParameter('pcm.icon_bundle.colours', $config['colours']);
|
||||||
$definition->addArgument($config['directories']);
|
|
||||||
$definition->addArgument($config['colours']);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ final class IconExtension extends AbstractExtension
|
|||||||
public function getFunctions(): array
|
public function getFunctions(): array
|
||||||
{
|
{
|
||||||
return [
|
return [
|
||||||
new TwigFunction('pcm_icon', [IconRuntime::class, 'renderIcon'])
|
new TwigFunction('pcm_icon', [IconRuntime::class, 'renderIcon'], ['is_safe' => ['html']])
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user