Nuxt Bootstrap Icons

Just a simple integration for bootstrap-icons

• ✨ Release Notes
• 🏀 Online playground
• 📖 Documentation

Features

• A <BootstrapIcon /> component (the name can be changed) — this renders the icons
• Different rendering modes for the icons — inline and component

Setup

1. Add nuxt-bootstrap-icons dependency to your project

# Using pnpmpnpm add -D nuxt-bootstrap-icons# Using yarnyarn add --dev nuxt-bootstrap-icons# Using npmnpm install --save-dev nuxt-bootstrap-icons

2. Add nuxt-bootstrap-icons to the modules section of nuxt.config.ts

export default defineNuxtConfig({  modules: ["nuxt-bootstrap-icons"],  // Optionally, customize the way of rendering icons  bootstrapIcons: {    renderType: "component", // or 'inline' (which is the default)  },});

Usage

There are 2 ways of rendering icons:

1. inline rendering: In this, you choose the icon to display using a name prop, for example:

   <template>  <BootstrapIcon name="xbox" /></template>

2. component rendering: Here the components are prefixed with BootstrapIcon and the name of the icon, for example:

   <template>  <BootstrapIconXbox /></template>

That's it! You can now use nuxt-bootstrap-icons in your Nuxt app ✨

Development

# Install dependenciespnpm install# Setup/sync icon componentspnpm setup# Generate type stubspnpm dev:prepare# Develop with the playgroundpnpm dev# Build the playgroundpnpm dev:build# Run ESLintpnpm lint# Release new versionpnpm release