Bootstrap Icons meets Nuxt

An easier way of using bootstrap-icons in your Nuxt project!

  • Nuxt 3 ready.
  • Typescript support.
  • An importable list of all the icons in bootstrap-icons.
Get started View project

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 bootstrap-icons for icons to use.

Usage

vue YourComponent

<BootstrapIcon name="alarm-fill" />

Note: You can choose between PascalCase and kebab-case when using the component.

If you're interested in using the types provided by the module

ts 

import type { BootstrapIconName } from '#bootstrap-icons/types'

Configuration

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

Select a key from the options below to see details specific to such key

ts nuxt.config

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

Default value: bootstrap-icon

This key allows you to set the prefix for the component registered by the module.