```
Alternatively, you can import the class, which extends `HTMLElement` (via `LitElement`).
```js
// Also recommended, if you need to use the imported object.
import { IconCalendarFilledLarge } from '@justeattakeaway/pie-icons-webc/dist/IconCalendarFilledLarge.js';
function renderIcon() {
// Using the imported class to create a new element
const iconElement = new IconCalendarFilledLarge();
document.body.appendChild(iconElement);
}
```
#### Importing multiple icons
The recommended approach for importing multiple icons is to import them one-by-one to keep your application lightweight and performant.
```js
import '@justeattakeaway/pie-icons-webc/dist/IconHeart.js';
import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js';
```
```html
```
Whilst it *is* possible to import all of the icons at once, this is **not recommended** as it will bloat and slow down your application.
Similarly, it is also **not recommended** to import individual icons from the package's main entrypoint, because it is likely that all icons will still be registered as custom elements in the browser.
You may also encounter issues with tree-shaking if you import an object but don't use it.
### Lit components
Importing and using an icon inside a Lit web component is very straightforward.
```js
import '@justeattakeaway/pie-icons-webc/dist/IconAppRestaurant.js';
export class MyAmazingComponent extends LitElement {
render () {
return html`
This is a heading
`;
}
}
```
### React
Each icon has a separate entrypoint for use in React applications.
```tsx
import { IconAlertTriangleLarge } from "@justeattakeaway/pie-icons-webc/dist/react/IconAlertTriangleLarge.js";
import { IconCalendar } from "@justeattakeaway/pie-icons-webc/dist/react/IconCalendar.js";
export default function App() {
return (
);
}
```
### Vue
Note that you don't need to register the icons as Vue components, because they aren't!
```html
```
## Props
### `size`
Icons are made available in different size variants:
- regular
- large, when its name has the `Large` suffix
A `regular` icon's default size is `xs` and can use one of the following pre-defined values for `size`: `xxs`, `xs`, `s`, `m`, `l`, `xl`, and `xxl`. You can learn more about regular icon sizes [here](https://www.pie.design/foundations/iconography/#small-icon-set).
A `large` icon's default (and minimum) `size` is `32`. Values larger than the minimum **must** be multiples of `8`, otherwise the default size will be used. You can learn more about large icon sizes [here](https://www.pie.design/foundations/iconography/#large-icon-set).
**Example:**
```js
```
### `fill`
You can set a custom fill colour for the icon by providing a `fill` attribute. The default value is `currentColor`, which means the icon will inherit the text colour of its parent element.
**Example:**
```html
```
## Browser support
The component extends [@justeattakeaway/browserslist-config-pie](https://github.com/justeattakeaway/pie/tree/main/packages/tools/browserslist-config-pie) package for the list of browsers to support.
## Contributing
Before starting, please read our [contributing guide](https://pie.design/engineers/contributing/).
### Adding new icons
Icons should be added as SVGs to the main pie-icons package and published, before simply incrementing the dependency of `pie-icons` in the `pie-icons-webc` package, to generate the new set of Web Components.
The PIE icon set is managed by our PIE Design System team. New icon requests should go through them to ensure that they meet our standards and follow our guidelines. Please reach out on the (internal) `#help-designsystem` Slack channel.
### Building the module
Run `yarn build --filter=pie-icons-webc` from the root of the monorepo.
## Icon library
You can view the full icon library on our [documentation site](https://pie.design/foundations/iconography/library/).
## Bundling
When we build the icons, we run a plugin for Rollup named `rollup-plugin-visualizer`. This generates a file named `stats.html` in the root of the package. This file can be viewed in the browser to visualise the bundled Javascript and better understand what contributes to the size of the final build output.
