Search documentation v0.6.1

Imports

How to import components into your project

Report Issue ↗️

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

How to import Astro components
---
import { Accordion } from 'webcoreui/astro'
---
<Accordion items={[{ ... }]} />
How to import Svelte components
<script>
import { Accordion } from 'webcoreui/svelte'
</script>
<Accordion items={[{ ... }]} />
How to import React components
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:

How to import SVG icons as strings
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.

This documentation assumes you render your component on the server, therefore, all subsequent code examples will use the Icon component where appropriate. If you use Webcore on the client, it’s recommended to use the above import instead.

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:

@import 'webcoreui/styles'; // For setting up Webcore
@import 'webcoreui/config'; // For using Webcore mixins
ImportPurpose
webcoreui/styles Imports the setup mixin that loads other SCSS files depending on your CSS configuration.
webcoreui/config Use at the top of your SCSS files if you'd like to use the mixins provided by Webcore.

Request improvement for this page