Setup

Run the following command to add the module to your project:

bash >_

$ npx nuxi@latest module add nuxt-bootstrap-icons

Congratulations 🎉. You have successfully added the module to your project and can now browse icon library

Note: This module would add a little bit of an overhead in the development and production environments.

Why? Well, this module loads 2078 icons globally as async chunks with no prefetching/preloading — I might add. No further explanation, that's all.

Usage

I want to read about the

vue YourComponent

<BootstrapIcon name="sun" />

You can use the props below to customize how the icon being rendered

Choose what icon to render. You can find them in the icon library

vue YourComponent

<BootstrapIcon name="moon-stars" />

You could also dynamically render an icon based on conditions, i.e;

vue YourComponent

<BootstrapIcon :name="{ 'moon-stars': isLightModeToggled, 'sun': !isLightModeToggled }" />

It's preferrable if there is only one key-value pair that's truthy at all times, else the component uses .find() to get the first truthy match.

Note: Doing this preloads all the keys of the name prop object (to load times faster).

You could also extend the component with custom attributes utilizing the <slot /> element provided within the runtime component.

vue YourComponent

<BootstrapIcon name="moon-stars">
  <style> /* Your styling goes here */ </style>
</BootstrapIcon>

Configuration

You can configure the module using the bootstrapIcons key in the nuxt.config

This key allows you to set the name of the component registered by the module.

Default: bootstrap-icon

ts nuxt.config

export default defineNuxtConfig({
  bootstrapIcons: {
    componentName: "bi",
  },
});