DEV Community

Cover image for How to render SVGs in Preact
Emma Goto πŸ™
Emma Goto πŸ™

Posted on β€’ Originally published at emgoto.com on

4 3

How to render SVGs in Preact

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="http://www.w3.org/2000/svg"
    >
        <path></path> { /** Your path code goes here*/ }
    </svg>
);

export default MenuIcon;

Enter fullscreen mode Exit fullscreen mode

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

<MenuIcon/>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
allexon profile image
Alexon da Silva Moreira β€’

Hello, I have this problem when doing yarn build with Preact, in svg component files, I've tried a lot I don't know why, I can't build - allexon@gmail.com

Image description

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up