gapmiss
Define new badge types including icons
I see that you can use the CSS Snippets to define new badges, but they seem to only have color settings exposed and I cannot find a way to specify the icon to be associated with that badge. Can this be added? (Or added to the example snippet if the feature is already available?) Thanks!
P.S. Love the Live Preview integration!
@akhtsang, the custom badge's syntax is real simple and there is some examples on README.MD file of this repo.
SYNTAX
`[!!|ICON|KEY:VAL|COLOR-RGB]`
| Element | Detail |
|---|---|
| | | Start pipe symbol |
| !! | Double exclamation points |
ICON |
name of icon from lucide.dev |
| | | Pipe symbol |
KEY:VAL |
KEY is the type or label, VAL is the value text displayed. |
| | | Pipe symbol |
COLOR-RGB (optional, defaults to currentColor) |
3 (R.G.B.) numeric (0-255) values, separated by commas. e.g. 144,144,144 or a CSS variable e.g. var(--color-red-rgb) |
EXAMPLES
`[!!|message-square|comment:edited by j.d.|var(--color-cyan-rgb)]`
`[!!|dice|roll:eleven|120,82,238]`
`[!!|gem|mineral:emerald|var(--my-custom-rgb)]`
`[!!|apple|fruit:snack|var(--color-red-rgb)]`
`[!!|brain|brain:pkm|var(--color-purple-rgb)]`
`[!!|sun|weather:sunny|var(--color-yellow-rgb)]`
`[!!|cloudy|weather:cloudy|var(--mono-rgb-100)]`
`[!!|sunset|weather:8.44pm|var(--color-orange-rgb)]`
`[!!|dumbbell|reps:3 sets of 50|var(--mono-rgb-00)]`
`[!!|gift|event:wedding|var(--color-blue-rgb)]`
`[!!|plus-square|credit:$100|var(--color-green-rgb)]`
`[!!|minus-square|debit:$10|var(--color-pink-rgb)]`
RESULTS
Yes @todearaujo you can use any lucide icon using the custom badge syntax. Thank you for pointing that out.
As time permits, I am working on some improvements to the plugin to allow a more simple syntax including a prompt for inserting new badges.
