Modules

nuxt-bootstrap-icons

Just a simple integration for Bootstrap Icons

•

OyewoleOyedeji

Nuxt Bootstrap Icons

Just a simple integration for bootstrap-icons

Features

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

Setup

Add nuxt-bootstrap-icons dependency to your project

# Using pnpm
pnpm add -D nuxt-bootstrap-icons

# Using yarn
yarn add --dev nuxt-bootstrap-icons

# Using npm
npm install --save-dev nuxt-bootstrap-icons

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:

inline rendering: In this, you choose the icon to display using a name prop, for example:
```
<template>
  <BootstrapIcon name="xbox" />
</template>
```
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 dependencies
pnpm install

# Setup/sync icon components
pnpm setup

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Release new version
pnpm release