If you are new to Astro, consider this a gentle introduction. If, however, you already have some experience with Astro you will see a new and efficient way to add SVG icons to your Astro app. This will let you pick icons from any icon library you want, just by adding a single dependency.
The code we will look at can easily be added to an existing project, though if you are new to Astro, just follow along and you can add it to your next project! If you are starting a new project, let’s get the ball rolling in the Terminal:
npm if you prefer those
pnpm. Choose Minimal from the list of templates.
We disable telemetry here. Skip that line if you want to keep data collection. The Astro dev server
will normally run on port
3000 but if there is already something running
there, it will find the next available port. The terminal will then tell you which port it settled
Here we have port 3001 and can access our page at the localhost link shown. This is a great feature, just make sure you only run one server at a time though! You can run multiple servers, but a couple of times I have spun up a new dev server while I already had one running in preview mode. Of course, the preview one was open in the browser and I couldn't work out why code changes weren't showing up… a fun way to waste ten minutes!
Anyway, if you are following along, starting from scratch, replace the content in
src/pages/index.astro with this:
src/pages/index.astro — click to expand code.
This is just some placeholder text which will let us explore a few Astro features as we build out the Astro scroll to anchor feature.
Finally at the bottom we have some styling. You can include it like this within a script tag in
your Astro file. As an alternative, for a typical project, you can create a global CSS stylesheet
and import that in your Astro frontmatter. In this case you can still include any styles for the
current page in this style tag. If you do want to use global stylesheet, just save it somewhere
src folder of your project and import it as mentioned.
Before proceeding, download some self-hosted fonts which we will use on the site. Save raleway-latin-400-normal.woff2 and raleway-latin-700-normal.woff2 together with raleway-latin-900-normal.woff2 to a new,
public/fonts directory within the project.
The markup and styling for the Astro scroll to anchor feature will go in a new Astro component
file. You can create Astro components as well as pages. The components are akin to those you would
have in a React or SvelteKit app. Create a
src/components folder and
within that directory make a new
Heading.astro file, adding this content:
You see a few Astro features in here. Firstly, like our home page we have three sections:
frontmatter, markup and styles. In the first line we import the
astro-icon package by Nate Moore , an Astro maintainer. This makes use of Anthony Fu's fantastic icônes library (used with the iconify package). If you haven’t yet heard of it, it is definitely worth exploring.
Go to the icônes site where you can find icons from just about every library that exists. You can pick
the icons you want for your app and under the hood,
imports just the ones you need.
We use the icon in line
12, you just select the icon you want on
the icônes site and it gives you a name to add which you add as an attribute to the
<Icon> component instances. Before that though, we need to install it the package:
and add a few lines of config to
astro.config.mjs in the project root
4 (of the
you see how to access props in an Astro component, we will include these in the markup for the home
page in the next step. The two props will be the text of the title together with an id, used to create
the scrolling link. This needs to be unique for each link we create. We actually use the
text prop in the markup, in line
Moving in line
11 we use an Astro shortcut (this will look familiar
if you know Svelte). We can use this shortcut whenever the name of a variable matches the name of the
attribute we want to assign it to:
is equivalent to:
Finally in lines
26–30, you see we can style the icon by
[astro-icon]. Notice the global CSS variables we
defined on the home page are available in our component.
Using the new component is a breeze. Let's update
src/pages/index.astro first, importing our new
and then using it in the headings:
We are passing the text in as a prop. This is so that you have easier access to the title text in the component, so for example, you could add some code to remove widows. This is the pet peeve of typographers where you have a single short word alone on a line. The alternative is to rewrite the component so it accepts the title text sandwiched between the Heading component:
Then in the heading component, in the markup you would need to replace
<slot/>. We won't go into details, here, just
want to let you know another way exists.
If you save and hover over one of the headings, you icon should show up.
The final missing piece is to add a touch of CSS to get smooth scrolling. It might seem counter-intuitive but we will switch off the feature for users who prefer reduced motion. This is just because on a long page, scrolling can be quite quick, and might trigger nausea in site visitors with vestibular disorders.
That’s it now! Let’s test it out next.
In this post we have had an introduction to Astro and seen:
- how to pass props into an Astro component and access them from within the component,
- a convenient and efficient way to add SVG icons to your Astro app,
- how to make smooth scrolling more accessible.
The full code for the app is available in the Astro demo repo on Rodney Lab GitHub .
I hope you found this article useful and am keen to hear how you plan to use the Astro code in your own projects.
- astro-icon is a great choice for adding SVG icons to your Astro app. It provides an API for all of the icons in the icônes library. That library includes icons from just about every set of icons you could possibly want to use. astro-icon will efficiently import only the icons you use, helping to keep the shipped bundle size small.
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.