<Meta title='1.Docs|09-Icons' />

# General

Currently all SVGs in the system are being processes by Webpack.
SVGs can currently be used in JSX and SCSS files.

## JSX Usage

Used in JSX, you'll currently receive two different exports,
a named export and a default export.

The Default export returns a base64 string for use with image tags:

```
import cartIcon from './../../icons/tailwind-icons/icon-cart.svg'

<img src={cartIcon} />
```

The named export (named `ReactComponent`) returns a React Component
width an SVGO optimized SVG Element:

```
import { ReactComponent } from './../../icon/tailwind-icons/icon-cart.svg'

<ReactComponent />
```

It is recommended to rename the named export like so:

```
import { ReactComponent as CartIcon } from './../../icons/tailwind-icons/icon-cart.svg';

<CartIcon />
```

React Component SVGs have the default width and height set to 1em, which
means the size can be controlled via CSS, by giving the parent element
a font-size:

```
import { ReactComponent as CartIcon } from './../../icons/tailwind-icons/icon-cart.svg';

<div className="myIcon">
    <CartIcon />
</div>
```
```
.myIcon { font-size: 40px; }

```



## SCSS Usage

SVGs are converted into a base64 string and can be used as usual:

```
.c-logo {
    background: url("../../layout/logoCatwalk.svg") no-repeat center;

}
```
