Documentation

:-P An easier way of using bootstrap-icons for your Nuxt project!

Setup

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

  $ pnpm dlx nuxi@latest module add nuxt-bootstrap-icons



  
    
    Copy
  
  

Aside: I know I'm being preferential in my choice of package managers

Congratulations 🎉, you can now browse bootstrap-icons for icons to use in your project!

Usage

Tip: Click on an icon to copy the component name

Tip: You can use any case style for the components

Configuration

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

Options

display

1. Default: inline
2. Description: How should the module register the icons?
3. Type: String

  export default defineNuxtConfig({
  bootstrapIcons: {
    display: "inline", // or 'component'
  },
});



  
    
    Copy
  
  

Note: When using inline, the module will register a component (depending on your prefix)

  <BootstrapIcon name="0-circle" />



  
    
    Copy
  
  

Note: When using component, the module will register all icons from bootstrap-icons as components (including the prefix)

  <BootstrapIcon0Circle />



  
    
    Copy
  
  

prefix

1. Default: bootstrap-icon
2. Description: What should be prefixed to the icons?
3. Type: String

  export default defineNuxtConfig({
  bootstrapIcons: {
    prefix: "your-prefix",
  },
});



  
    
    Copy
  
  

Tip: if you have a multi word prefix, you should include a — between the words.

showList

1. Default: false
2. Description: Option: enable to add a virtual JSON file containing all the icons registered at path
   #build/nuxt-bootstrap-icons.json
3. Type: Boolean

  export default defineNuxtConfig({
  bootstrapIcons: {
    showList: true,
  },
});



  
    
    Copy