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
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.
Import icons from fontawesome-bootstrap-icons
.
// ESM
import { biHeart, biHeartFill } from "fontawesome-bootstrap-icons";
// CJS
const { biHeart, biHeartFill } = require("fontawesome-bootstrap-icons");
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.
// 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.
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" />
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.