You’ve probably seen many websites using cool bullet points instead of plain old-boring ones. How do they do it? Is there an effective and simple way to create fancy bullets while writing really simple code? The answer is there is — with Astro, it's possible. You can simply write markdown and have the outcome be a nicely formatted bullet you made with SVGs. Before we begin I'm going to assume you know how to use and you know how to integrate MDX into Astro. If you don't, don't worry. Just follow through and you should get a basic idea of how things work, then go figure out how to use Astro and MDX. Astro (I'm going to create a course for it soon because Astro is fantastic — it's the best static site generator I've ever used). Steps If you've been using Astro, you can probably infer these steps from the example I showed you above. They are: You create a component that takes in your bullets in the content. <List> <slot> You grab these bullets in the component. <List> You loop through each list item and prepend an SVG before the bullet. Here's what the markup looks like; ---
const { bullet } = Astro.props
---
<ul class='List'>
  {
    listItems.map(item => (
      <li>
        
        <Fragment set:html={item.innerHTML} />
      </li>
    ))
  }
</ul> The cool thing about this is you can add extra properties like , , and all sorts of things to change the SVG so it renders with enough uniqueness. fill stroke Here are some examples where I changed the SVG for . fill Magical Dev School I'm going to show you how to build a simple version that lets you insert an SVG you want. We won't be going through the advanced stuff like adding and and other conditions though! fill stroke Grabbing the bullets in Astro Astro lets you get the contents of a element inside your component. <slot> You can get this content by calling a function. You'll see a that contains the which will be created. render string HTML ---
const html = await Astro.slots.render('default')
console.log(html)
--- Next, this is where the magic happens You can parse this HTML string and get the list items — just like doing a standard with JavaScript. document.querySelectorAll To do this, you need to parse the HTML string into a DOM-like structure. There are many parsers you can use here. The one I've chosen to use for my projects is . (Because it's fast). node-html-parser ---
import { parse } from 'node-html-parser'

const html = await Astro.slots.render('default')
const root = parse(html)
--- After parsing the HTML, you can grab the list items by using . querySelectorAll ---
// ...

const listItems = root.querySelectorAll('li')
--- You can then map through the list items and build your fancy list. ---
// ...
---
<ul class='List'>
  {
    listItems.map(item => (
      <li>
         
        <Fragment set:html={item.innerHTML} />
      </li>
    ))
  }
</ul> Adding SVGs The simplest way to add SVGs into the component is to use inline SVGs. If you want to switch between different types of list items, you can ask the user to pass in a property. Then, you inline a different SVG depending on the value. bullet bullet ---
const { bullet } = Astro.props
// ...
---

<ul class='List'>
  {
    listItems.map(item => (
      <li>
        { bullet === 'green-check' && <svg> ... </svg> }
        { bullet === 'red-cross' && <svg> ... </svg> }
        { bullet === 'star' && <svg> ... </svg> }
        <Fragment set:html={item.innerHTML} />
      </li>
    ))
  }
</ul> Of course, this isn't the best way... Better way to add SVGs The better way is to add an SVG through a component. When you do this, you can simply pass in an SVG and let the SVG component handle the SVG logic. ---
import SVG from './SVG.astro'
const { bullet } = Astro.props
// ...
---

<ul class='List'>
  {
    listItems.map(item => (
      <li>
        <SVG name={bullet} />
        <Fragment set:html={item.innerHTML} />
      </li>
    ))
  }
</ul> The simplest way to build this SVG component is to inline SVG code within it, like in the example shown above. ---
// SVG component
const { name } = Astro.props
---

{ bullet === 'green-check' && <svg> ... </svg> }
{ bullet === 'red-cross' && <svg> ... </svg> }
{ bullet === 'star' && <svg> ... </svg> } But this isn't the best way because you still have to use conditional statements... And SVG can be notoriously big and complex so you'll end up creating something unwieldy instead... The best way to build the SVG component The best way is to: Keep the SVG in an folder svgs Grab the SVG from this folder when you pass the into the component name <SVG> How to do this is best left for another lesson since we'll go deep into another topic. If you'd like to find out how I build the component, along with how I use Astro and Svelte, scroll down and leave your email in the form below. I'd love to share more with you! SVG Fancy Validation What's pretty cool about this approach is you can even use Astro to validate the type of you pass into , the , the , and other properties you want. bullet <List> fill stroke Of course, you can do this with Typescript as well. I'm just showing you that you can use normal JS if you want to keep things simple. const validators = {
  bullet: [{
    type: 'star', 
    fill: ['yellow', 'green', 'red', 'blue'],
    stroke: ['black', 'transparent'],
  }]
}

validate({ ...Astro.props })

function validate () {
  // Check props against validators
} That's it! Hope you learned something new today! Originally published on my . blog Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The Best Practice for Container Queries: Place Them in a Parent Element

Scaling Styling Roadblocks Caused by Astro Islands and Slots

Read my articles here

Nominated for 2022 - HackerNoon Contributor of the Year - Data Security

Too Long; Didn't Read

Make resilience your competitive advantage

How to Building Fancy List Items in Astro

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

Adding a Headless CMS to Astro in 3 Steps

An Intro to the Astro Framework: Benefits and Drawbacks

Creating an Astro Site: Add Lucide Icons to Astro

Implementing Dynamic Tags in Astro

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

Adding a Headless CMS to Astro in 3 Steps

An Intro to the Astro Framework: Benefits and Drawbacks

Creating an Astro Site: Add Lucide Icons to Astro

Implementing Dynamic Tags in Astro

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps