How to render SVGs in Preact

20 November 2020

If you want to render an .svg file in in Preact, I found inline SVGs to be the easiest way to get things working.

import { h } from 'preact';

const MenuIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24"
        fill="none" xmlns=""
        <path></path> { /** Your path code goes here*/ }

export default MenuIcon;

And then you can use it as you would normally use a Preact component:

🦉 Subscribe to my monthly newsletter for updates on my latest posts and projects.