@itwin/itwinui-icons-elements/README.md

Exports svgs from @itwin/itwinui-icons as custom elements

# @itwin/itwinui-icons-elements

Custom elements for svgs from [@itwin/itwinui-icons](https://www.npmjs.com/package/@itwin/itwinui-icons).

## Usage

1. Import the custom element.

In an HTML page:

```html
<script type="module" src="https://cdn.skypack.dev/@itwin/itwinui-icons-elements/placeholder"></script>
```

Or in JavaScript (after installing through npm/yarn):

```js
import { SvgPlaceholder } from '@itwin/itwinui-icons-elements';
```

2. Add the element to your markup. All element names start with `svg-` followed by the name of the icon.

```html
<svg-placeholder></svg-placeholder>
```

### React / JSX typings

When using in a React + TypeScript environment, you will have to [add your own type declarations in the `JSX.IntrinsicElements` interface](https://github.com/Microsoft/TypeScript/issues/15449). For this reason, [among others](https://custom-elements-everywhere.com/#:~:text=react%20implements%20its%20own%20synthetic%20event%20system), it is recommended to use the [@itwin/itwinui-icons-react](https://www.npmjs.com/package/@itwin/itwinui-icons-react) library instead.