There are two ways we use SVG assets

- Embedded in HTML
- Inline in an image tag

For both cases we import the SVG asset in a similar way but with minor differences:

#### Embedding SVG

```jsx static
import SVGIcon from './svg-icon.svg'

return (
  <div>
    <SVGIcon />
  </div>
)
```

```jsx noeditor
import Note from '../../src/_doc/Note';
<Note type="tip">
  By doing this, you eliminate the need to rewrite your SVG attributes for JSX
  compatibility e.g Keep <strong>stroke-width</strong> instead of <strong>strokeWidth</strong>, <strong>fill-rule</strong> over <strong>fillRule</strong> , <strong>clip-path</strong> over <strong>clipPath</strong> etc.
</Note>
```

#### Inline SVG

```jsx static
import svgImage from './svg-image.svg?inline'

return (
  <div>
    <img src={svgImage} alt="My SVG image" />
  </div>
)
```

```jsx noeditor
import Note from '../../src/_doc/Note';
<Note type="info">
  Inline SVG take the <strong>?inline</strong> query parameter on import and
  uses a base64 encoded SVG data-uri in the image tag.
</Note>
```

### Optimization
It is recommended to optimize SVG before usage. After handoff from Figma, there are possibly a lot of performance improvements that can still be made to reduce the size of a SVG code. Here are some tools we use for that.

- [SVGOMG - Web based](https://jakearchibald.github.io/svgomg/)
- [SVGO - Cli tool. Also works with image optimization software like imageOptim](https://www.npmjs.com/package/svgo)

```jsx noeditor
import Note from '../../src/_doc/Note';
<Note>
  Using SVGO with imageOptim might often not produce results as good as the SVGO cli or SVGOMG
</Note>
```