Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c1ac0faf78 |
22
README.md
22
README.md
@@ -33,11 +33,12 @@ pcm_icon:
|
||||
fill-group-hover: 'group-hover:fill-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.
|
||||
|
||||
`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
|
||||
COLOUR:
|
||||
@@ -51,22 +52,13 @@ COLOUR:
|
||||
|
||||
## 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:
|
||||
```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'
|
||||
```
|
||||
`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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user