Fancy List
FancyList
lets you create lists with bullets that use SVG icons or emojis.
-->
FancyList
lets you create lists with bullets that use SVG icons or emojis.
Use the emoji
property to create list items with emoji bullets.
Because Iām Happy ~āŖ
Clap along if you:
feel like a room without a roof
feel like happiness is the truth
know what happiness is to you
feel like that's what you wanna do
Choose from over 200,000 open source icons from the iconify project, including but not limited to Tabler, Phosphor, Material, and Carbon icons.
This makes it much easier for you to create the list items that you want! (FancyList
uses Markdown
under the hood to achieve this).
Send visual, memorable, messages with the help of icons and emojis. Take your list-game up a level!
Apple
Banana
Carrot
Blend them all and you get...
ABC Juice!
You can use SimpleSVG
to help style your FancyList
SVG icons. Just add the class and pop in your fill
or stroke
value!
You can import the FancyList
component to use it.
You can use emoji
to create lists with emoji bullets.
Bullet 1
Bullet 2
Bullet 3
Bullet 4
You can use icon
to create lists with SVG icons. Please see SVG
to understand how icon
works.
Bullet 1
Bullet 2
Bullet 3
Bullet 4
Pass in an array of objects into items
. Each object
should take in an emoji
or icon
property for the bullet and a value
property for the text value.
Star Emoji
Star Icon
FancyList
supports Markdown by using the Markdown
component. Just pass any valid markdown into items
and they will be converted into Markdown content.
Write
items
in
Alternatively, you can also write markdown directly as the slot
content. Take note that if you do this, you may need to use prettier-ignore
as mentioned on the Markdown
component.
Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.
We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.
You can import the FancyList
component to use it.
You can use emoji
to create lists with emoji bullets.
Bullet 1
Bullet 2
Bullet 3
Bullet 4
You can use icon
to create lists with SVG icons. Please see SVG
to understand how icon
works.
Bullet 1
Bullet 2
Bullet 3
Bullet 4
Pass in an array of objects into items
. Each object
should take in an emoji
or icon
property for the bullet and a value
property for the text value.
Star Emoji
Star Icon
FancyList
supports Markdown by using the Markdown
component. Just pass any valid markdown into items
and they will be converted into Markdown content.
Write
items
in
Alternatively, you can also write markdown directly as the slot
content. Take note that if you do this, you may need to use prettier-ignore
as mentioned on the Markdown
component.
You can import the basic styles for FancyList
through Splendid Styles.
Please note that the above code block contains installation instructions only
for FancyList
. If you wish to install styles for all components, see
Installing Splendid Styles
FancyList
produces the following HTML:
We set the roles
and listitem
to <ul>
and <li>
respectively to retain accessibility since list-style
had to be removed.
Styling FancyList
with custom CSS is easy. You can overwrite our styles with a single class because we wrote the CSS for you with customizability in mind.
You can use the following properties to style FancyList
with Tailwind:
Property | Description |
---|---|
class | Class for the <ul> element |
liClass | Class for the <li> element |
emojiClass | Class for the emoji |
iconClass | Class for the SVG icon |
You can use SimpleSVG
to style SVG Icons easily.
Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.
We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.
You can import the basic styles for FancyList
through Splendid Styles.
Please note that the above code block contains installation instructions only
for FancyList
. If you wish to install styles for all components, see
Installing Splendid Styles
FancyList
produces the following HTML:
We set the roles
and listitem
to <ul>
and <li>
respectively to retain accessibility since list-style
had to be removed.
Styling FancyList
with custom CSS is easy. You can overwrite our styles with a single class because we wrote the CSS for you with customizability in mind.
You can use the following properties to style FancyList
with Tailwind:
Property | Description |
---|---|
class | Class for the <ul> element |
liClass | Class for the <li> element |
emojiClass | Class for the emoji |
iconClass | Class for the SVG icon |
You can use SimpleSVG
to style SVG Icons easily.
Use these properties to style FancyList
with Tailwind or classes.
Property | Description |
---|---|
class | Class for the <ul> element |
style | Inline style for the <ul> element |
liClass | Class for the <li> element |
emojiClass | Class for the emoji |
iconClass | Class for the SVG icon |
Use these properties to create a list with custom bullets.
Property | Type | Description |
---|---|---|
emoji | string | The emoji to use as the bullet |
icon | string | The SVG Icon to use as the bullet. See SVG for instructions on using this. |
items | string[] | Item[] | List items. See Item |
Name | Description |
---|---|
Default | List items written in a Markdown syntax. |
List of items. This is required if you did not provide list items in slot
content. It can be an array of strings or Item
objects.
string[] | object[]
[]
If objects are passed into items
, each object have have the following :
Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.
We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.
Use these properties to style FancyList
with Tailwind or classes.
Property | Description |
---|---|
class | Class for the <ul> element |
style | Inline style for the <ul> element |
liClass | Class for the <li> element |
emojiClass | Class for the emoji |
iconClass | Class for the SVG icon |
Use these properties to create a list with custom bullets.
Property | Type | Description |
---|---|---|
emoji | string | The emoji to use as the bullet |
icon | string | The SVG Icon to use as the bullet. See SVG for instructions on using this. |
items | string[] | Item[] | List items. See Item |
Name | Description |
---|---|
Default | List items written in a Markdown syntax. |
List of items. This is required if you did not provide list items in slot
content. It can be an array of strings or Item
objects.
string[] | object[]
[]
If objects are passed into items
, each object have have the following :