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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs