Icon component
The
<Icon>
component allows you to access a set of pre-installed icon libraries and use them in your documentation.
<Icon set="devicon" name="typescript" size="lg" variant="boxed" color />
Icon sets
The two icon sets supported are Lucide and Devicon .
Attributes
The
<Icon>
component accepts the following attributes.
Set
The
set
attribute specifies the icon set to use. It must be either
lucide
or
devicon
.
This is a required attribute.
// [!code word:set:1] <Icon set="lucide" name="dog" />
Name
The
name
attribute specifies the name of the icon to use within the chosen set.
This is a required attribute.
// [!code word:name:1] <Icon set="lucide" name="dog" />
Color
Specifying the
color
attribute will fill the icon with your theme's accent color.
// [!code word:color:1] <Icon set="lucide" name="dog" color />
Variant
You can also specify a
plain
or
boxed
variant. The latter will add some padding around your icon.
Defaults to
plain
. Can be combined with
color
.
// [!code word:variant:1] <Icon set="lucide" name="dog" variant="boxed" />
Size
Finally, you can set a
size
of
sm
,
md
,
lg
, or
xl
(the default is
md
).
// [!code word:size:1] <Icon set="devicon" name="typescript" size="lg" />
Class
You can add a custom CSS class to the icon using the
class
attribute. This is useful for applying custom styles to the icon.
// [!code word:class:1] <Icon set="lucide" name="dog" class="my-custom-css">