Svg Reference

How to render an SVG?

To render a SVG, you can:

• use one of the following components in a markdown page:
  • Svg
  • Icon (If you want your SVG to be seen as a text character)
• import a svg file in a programmatic page

Options

Optimization

The svg are optimized

• on import
• with the following components
  • Svg
  • Icon

The following svg configuration are applied:

• svgo preset-default
• removeViewBox and removeDimensions: ie keep or create viewBox and deletes the dimensions (width and height)
• removeTitle, removeDesc, removeDoctype

Sizing

Note that the optimization deletes the dimensions (width and height) so that the author or the parent container can control them via

• tailwind class
• or attribute.

Example:

• Via tailwind class

jsx⎘ Copy
<span className={"inline-block size-[12em]"}><Svg src="illustration.svg"/></span>
// This example is simplistic, but you would need it if the icon name came from an external source

• Via attribute on the Svg and Icon components

jsx⎘ Copy
<Svg src="illustration.svg" width={100}/>
<Icon src="icon.svg" size={24}/>

Import

On file import, the SVG are transformed as React Component with SvgR

Example:

• With the below import statement, OpenAiIcon is a React component optimized

jsx⎘ Copy
import OpenAiIcon from "bootstrap-icons/icons/openai.svg"

export default function MyIcon() {
    return <OpenAiIcon width={24}/>
}

• or from a file

jsx⎘ Copy
import Arrow from "./arrow-right-circle.svg"

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