Define new badge types including icons

akhtsang commented 10 months ago

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!

todearaujo commented 9 months ago

@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

gapmiss commented 9 months ago

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.

gapmiss / badges

Define new badge types including icons #7