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 with the svgo preset

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

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}/>
    )
}