Svg Component

Usage

Markdown Page

Within a Markdown page, you can use the Svg component to:

• optimize
• and include your svg in your document

The src attribute indicates the relative path to the file in the images directory.

<Svg src="arrow-right-circle.svg" width="40"/>

Output example:

Programmatic Page

In a programmatic page, importing a svg will return an optimized React Svg Component

Example:

import Arrow from "./arrow-right-circle.svg"

export default function svgPage() {
    return (
        <Arrow width={10}/>
    )
}

Optimization

The svg are optimized with the svgo preset