Imports

How to import components into your project

To start using Webcore components in your code, import them from webcoreui/astro, webcoreui/svelte, or webcoreui/react, depending on your project:

---
import { Accordion } from 'webcoreui/astro'
---

<Accordion items={[{ ... }]} />

<script>
    import { Accordion } from 'webcoreui/svelte'
</script>

<Accordion items={[{ ... }]} />

import React from 'react'
import { Accordion } from 'webcoreui/react'

const Component = () => <Accordion items={[{ ... }]} />

export default Component

Importing Icons

While Webcore provides an Icon component that can be used for rendering SVG icons on the server, it can drastically increase your bundle size if used on the client, as it prebundles all icons.

If you want to include icons provided by Webcore on the client-side, it’s recommended to import them directly as strings using the following imports:

import { info } from 'webcoreui/icons'

This can be useful in cases where you cannot use a component. In this case, the value of info will be an SVG string that you can use to dynamically render the icon. To see available icons for import, visit the Icon component documentation.

Utilities

If you need to use utility functions within your project, you can import them directly from webcoreui:

import { modal, toast } from 'webcoreui'

To see all available utility functions provided by Webcore, visit the Utilities documentation page.

CSS Imports

Apart from the above-mentioned modules, Webcore also exposes the following two exports that you can import and use within your SCSS files:

@use 'webcoreui/styles' as *; // For setting up Webcore
@use 'webcoreui/config' as *; // For using Webcore mixins and config variables