diff --git a/README.md b/README.md index 5156857..5303d0b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # PCM Icon Bundle -Use icons inside of Twig templates with ease! +Use icons inside of Twig templates with ease! Project must be using Tailwind for the colours to work properly. + ```php {{ icon({ icon: 'person' }) }} @@ -52,9 +53,18 @@ PALLETE_NAME: `size (int)` Size of the icon in pixels -`colour (string)` Name of the main colour pallete to use. Defaults to `"primary"`, assuming that a pallete with the project's primary colour will exist +`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. +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.