fontawesome-bootstrap-icons

Font Awesome SVG Icon Package of Bootstrap Icons

This is an adapter that enables you to use Bootstrap Icons with Font Awesome's SVG component for Vue.js and React.

See also: Web Fonts vs SVG | Font Awesome Docs

Installation

npm install fontawesome-bootstrap-icons
# or
yarn add fontawesome-bootstrap-icons
# or
pnpm add fontawesome-bootstrap-icons

You may also want to install packages provided by Fort Awesome.

# Vue.js 2.x
npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@latest-2

# Vue.js 3.x
npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@latest-3

# React
npm i @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

See also: Set Up with Vue, Set Up with React.

Usage

Import icons from fontawesome-bootstrap-icons.

// ESM
import { biHeart, biHeartFill } from "fontawesome-bootstrap-icons";
// CJS
const { biHeart, biHeartFill } = require("fontawesome-bootstrap-icons");

React

import ReactDOM from "react-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { biHeart } from "fontawesome-bootstrap-icons";

const element = <FontAwesomeIcon icon={biHeart} style={{ height: "1em" }} />;

ReactDOM.render(element, document.body);

Visit Add Icons with React | Font Awesome Docs for more details.

Vue.js

// import the fontawesome core
import { library } from "@fortawesome/fontawesome-svg-core";
// import specific icons
import { biHeartFill } from "fontawesome-bootstrap-icons";

// add icons to the library
library.add(biHeartFill);

<script setup>
// import font awesome icon component
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// import specific icons
import { biHeart } from "fontawesome-bootstrap-icons";
</script>

<template>
  <FontAwesomeIcon :icon="['bi', 'heart-fill']" />
  <FontAwesomeIcon :icon="biHeart" />
</template>

Visit Add Icons with Vue | Font Awesome Docs for more details.

For TypeScript users

You have to overwrite IconPrefix defined in @fortawesome/fontawesome-common-types if you are using TypeScript.

Place the following line in a .d.ts type declaration file (in Remix's remix.env.d.ts or Vite's env.d.ts, for example) that has been included in tsconfig.json:

/// <reference types="fontawesome-bootstrap-icons/types" />

Copyright and license

Code and icons are released under the MIT License.

• Icons copyright 2019–2022 Mark Otto (@mdo) and the Bootstrap Authors.
• Type declaration copyright 2022 Fonticons, Inc.
• Build scripts copyright 2022 Xinhe Wang.