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.
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.