;
+ totalCount: number;
+}
+
+const { page, pageCount, icons, categories, totalCount } = Astro.props;
+const description = `Browse Bootstrap Icons page ${page.toLocaleString()} of ${pageCount.toLocaleString()}. Search all ${totalCount.toLocaleString()} icons by name, tag, or category.`;
+---
+
+
+
+
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
new file mode 100644
index 0000000000..3346db94ae
--- /dev/null
+++ b/astro/src/pages/index.astro
@@ -0,0 +1,71 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import CodeCopy from "../components/CodeCopy.astro";
+import FigmaLogo from "../components/FigmaLogo.astro";
+import HeroSubnav from "../components/HeroSubnav.astro";
+import IconCatalogPage from "../components/IconCatalogPage.astro";
+import {
+ getCategories,
+ getIcons,
+ getPackageMeta,
+ getPageItems,
+} from "../lib/icons";
+
+const icons = getIcons();
+const categories = getCategories(icons);
+const initialIcons = getPageItems(icons, 1);
+const { version } = getPackageMeta();
+---
+
+
+
+
+
+
+
+
+
+
Bootstrap Icons
+
+ Free, high quality, open source icon library with over {
+ icons.length.toLocaleString()
+ } icons. Include them anyway you like—SVGs, SVG sprite, or web fonts.
+ Use them with or without Bootstrap in any project.
+
+
+
+
+
+
+
+ Reference an icon by filename from the bundled sprite and style it with
+ currentColor.
+
+
+ Download sprite
+
+
+
+
+ Use the sprite
+
+
+ Copy bootstrap-icons.svg into your site, then use the icon filename
+ as the fragment identifier.
+
+
+
+
+
+
+
+
+
+
+
+ Cross-origin use
+
+
+ Serve the sprite from the same origin as the page. Browser security
+ restrictions can prevent external <use> references across
+ domains.
+
+
+ For a standalone image with alt text, use an individual SVG from
+ /assets/icons/ instead.
+
+ See all usage options
+
+
diff --git a/astro/src/pages/usage.astro b/astro/src/pages/usage.astro
new file mode 100644
index 0000000000..7d5c929452
--- /dev/null
+++ b/astro/src/pages/usage.astro
@@ -0,0 +1,172 @@
+---
+import type { TocEntry } from "@twbs/bui/components/TableOfContents";
+import CopyBlock from "../components/CopyBlock.astro";
+import HeadingAnchor from "../components/HeadingAnchor.astro";
+import { getPackageMeta } from "../lib/icons";
+import DocsLayout from "../layouts/DocsLayout.astro";
+
+const { version } = getPackageMeta();
+const embedded = ``;
+const toc: TocEntry[] = [
+ { slug: "install", text: "Install", children: [] },
+ { slug: "usage", text: "SVG usage", children: [] },
+ { slug: "icon-font", text: "Icon font", children: [] },
+ { slug: "styling", text: "Styling", children: [] },
+ { slug: "accessibility", text: "Accessibility", children: [] },
+];
+---
+
+
+
+ Install
+
+ Install the full package—including individual SVGs, the sprite, and icon
+ fonts—or download the latest release.
+
+
+
+
Package manager
+
+
+
+
+
Download
+
+ Release archives include SVGs, fonts, the sprite, license, and
+ README.
+
+
Download latest ZIP
+
+
+
CDN
+ `}
+ />
+
+
+ Use a width and height of 1em when you want an icon to scale
+ with surrounding text.
+
+ Embedded SVG
+
+
+
+ External image
+
+
+
SVG sprite
+
+ Reference icons from the bundled sprite with <use>.
+ See the
+ sprite guide for examples and browser notes.
+
+
+
+
+ Icon font
+
+ Include the icon font stylesheet, then use the icon filename in a
+ bi-* class.
+
+
+ Sass
+
+ Point the font directory at the installed package before importing the
+ Sass file.
+
+
+
+
+
+ Styling
+
+ Embedded SVGs and the icon font inherit currentColor.
+ Change
+ font-size to resize a 1em icon.
+
+
+
+
+
+
+ Accessibility
+
+
+ Decorative icons should use aria-hidden="true". Meaningful
+ standalone SVGs need an accessible name, and icon-only controls need a
+ label on the control.
+
+
+
+`}
+ />
+
+ When using an SVG through <img>, provide useful
+ alt text, or an empty alt for a decorative image.
+
+
+
diff --git a/astro/src/styles.scss b/astro/src/styles.scss
new file mode 100644
index 0000000000..dc70a4bd82
--- /dev/null
+++ b/astro/src/styles.scss
@@ -0,0 +1,304 @@
+@use "@twbs/bui/scss/bootstrap";
+@use "bootstrap/scss/layout/breakpoints" as *;
+
+// Icons-only rendering mechanics that Bootstrap utilities cannot express.
+@layer custom {
+ // Keep this behavior in sync with Bootstrap v6's site/src/scss/_sidebar.scss.
+ .bd-sidebar {
+ font-size: var(--font-size-sm);
+
+ @include media-breakpoint-up(lg) {
+ position: sticky;
+ top: var(--bd-navbar-offset);
+ // Override the responsive display utility.
+ // stylelint-disable-next-line declaration-no-important
+ display: block !important;
+ height: calc(100vh - 8.5rem);
+ // Prevent focus styles from being cut off.
+ padding-inline-start: 0.25rem;
+ margin-inline-start: -0.25rem;
+ overflow-y: auto;
+ }
+
+ @include media-breakpoint-down(lg) {
+ // stylelint-disable-next-line selector-class-pattern
+ .lg\:drawer {
+ height: auto;
+ max-height: 90dvh;
+ border-inline-end-color: var(--bs-border-color);
+ box-shadow: var(--bs-box-shadow-lg);
+ }
+ }
+ }
+
+ .sidebar-shell-content {
+ min-width: 0;
+ }
+
+ // Canonical Bootstrap v6 docs sidebar navigation.
+ .bd-links {
+ .nav {
+ --bs-nav-gap: 2px;
+ --bs-nav-link-justify: flex-start;
+ --bs-nav-link-font-size: var(--font-size-sm);
+ --bs-nav-link-padding-x: 0.75rem;
+ --bs-nav-link-padding-y: 0.25rem;
+ margin-top: 0.25rem;
+ }
+ }
+
+ .docs-sidebar-sections {
+ .nav-link {
+ padding-inline-start: 1.5rem;
+ color: var(--bs-fg-2);
+ }
+ }
+
+ // Icons-local counterpart of Bootstrap v6's docs layout/content shell.
+ .docs-layout {
+ @include media-breakpoint-up(lg) {
+ display: grid;
+ grid-template-areas: "sidebar main";
+ grid-template-columns: minmax(11.375rem, 1fr) minmax(0, 5fr);
+ gap: var(--bs-gutter-x);
+ }
+ }
+
+ .docs-main {
+ grid-area: main;
+ min-width: 0;
+
+ @include media-breakpoint-down(lg) {
+ max-width: 47.5rem;
+ margin-inline: auto;
+ }
+
+ @include media-breakpoint-up(md) {
+ display: grid;
+ grid-template-areas:
+ "intro"
+ "toc"
+ "content";
+ grid-template-rows: auto auto 1fr;
+ gap: inherit;
+ padding-top: 0.75rem;
+ }
+
+ @include media-breakpoint-up(lg) {
+ grid-template-areas:
+ "intro content-toc"
+ "content content-toc";
+ grid-template-rows: auto 1fr;
+ grid-template-columns: minmax(0, 4fr) minmax(10rem, 1fr);
+ column-gap: 2rem;
+ }
+ }
+
+ .docs-main-without-toc {
+ @include media-breakpoint-up(lg) {
+ grid-template-areas:
+ "intro"
+ "content";
+ grid-template-columns: minmax(0, 50rem);
+ }
+ }
+
+ .bd-intro {
+ grid-area: intro;
+ }
+
+ .bd-content {
+ --content-font-size: 15px;
+ --content-line-height: calc(22 / 15);
+
+ grid-area: content;
+ min-width: 1px;
+ max-width: 100%;
+
+ @media (width >= 1024px) {
+ --content-font-size: var(--font-size-md);
+ --content-line-height: 1.625;
+ }
+
+ > section {
+ display: flex;
+ flex-direction: column;
+ gap: var(--content-gap);
+ margin-bottom: 0;
+
+ &:not(:first-child) {
+ margin-top: calc(var(--content-gap) * 0.75);
+ }
+ }
+
+ pre {
+ max-width: 100%;
+ overflow-x: auto;
+ }
+
+ .grid > *,
+ .row > * {
+ min-width: 0;
+ }
+
+ .bd-code-snippet {
+ max-width: 100%;
+ min-width: 0;
+ }
+ }
+
+ .bd-title {
+ color: var(--bs-fg);
+ text-wrap: balance;
+ }
+
+ .bd-subtitle {
+ max-width: 50rem;
+ font-size: 1.125rem;
+ font-weight: 300;
+
+ @media (width >= 1024px) {
+ font-size: 1.25rem;
+ }
+ }
+
+ .docs-install-grid {
+ grid-template-columns: minmax(0, 1fr);
+
+ @include media-breakpoint-up(md) {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ > * {
+ min-width: 0;
+ }
+ }
+
+ .bd-toc {
+ grid-area: content-toc;
+
+ @include media-breakpoint-up(lg) {
+ position: sticky;
+ top: var(--bd-navbar-offset);
+ align-self: start;
+ width: 100%;
+ max-height: calc(100vh - var(--bd-navbar-offset) - 2.25rem);
+ padding-inline-end: 0.25rem;
+ margin-inline-end: -0.25rem;
+ overflow-y: auto;
+ }
+ }
+
+ .icon-catalog-layout {
+ @include media-breakpoint-up(lg) {
+ display: grid;
+ // Keep the 48px gutter while returning 50px from the quarter-width
+ // sidebar track to the catalog.
+ grid-template-columns:
+ minmax(11.375rem, calc(25% - 3.875rem))
+ minmax(0, 1fr);
+ gap: var(--bs-gutter-x);
+ }
+ }
+
+ .icon-catalog-main {
+ min-width: 0;
+ }
+
+ .icon-catalog-breadcrumb {
+ --bs-breadcrumb-font-size: var(--font-size-sm);
+ --bs-breadcrumb-link-padding-x: 0;
+ --bs-breadcrumb-link-padding-y: 0;
+ --bs-breadcrumb-link-hover-bg: transparent;
+ }
+
+ [data-category-link] {
+ width: 100%;
+ min-width: 0;
+ white-space: normal;
+ }
+
+ [data-category-link] > :first-child {
+ min-width: 0;
+ overflow-wrap: anywhere;
+ }
+
+ [data-category-link] > .badge {
+ flex-shrink: 0;
+ }
+
+ [data-icon-grid] {
+ --bi-catalog-icon-size: 2rem;
+ }
+
+ .icon-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+ gap: 1rem;
+ }
+
+ .icon-size-group {
+ flex: 0 0 auto;
+ }
+
+ [data-icon-grid][data-icon-size="16"] {
+ --bi-catalog-icon-size: 1rem;
+ }
+
+ [data-icon-grid][data-icon-size="24"] {
+ --bi-catalog-icon-size: 1.5rem;
+ }
+
+ [data-icon-card] img {
+ width: var(--bi-catalog-icon-size);
+ height: var(--bi-catalog-icon-size);
+ }
+
+ .icon-demo .bi,
+ .icon-demo-examples .bi {
+ width: 1em;
+ height: 1em;
+ }
+
+ [data-bs-theme="dark"] [data-icon-card] img {
+ filter: invert(1) grayscale(1);
+ }
+
+ .bd-content h2,
+ .bd-content h3 {
+ scroll-margin-top: 6rem;
+ }
+
+ .anchor-link {
+ padding-inline: 0.25rem;
+ color: color-mix(in srgb, var(--bs-link-color), transparent 50%);
+ text-decoration: none;
+ opacity: 0;
+
+ &::after {
+ content: "#";
+ }
+
+ &:focus,
+ &:hover,
+ :hover > &,
+ :target > & {
+ opacity: 1;
+ }
+ }
+
+ .icon-demo {
+ min-height: clamp(18rem, 52vw, 36rem);
+ font-size: clamp(9rem, 25vw, 18rem);
+ background-image: radial-gradient(
+ circle,
+ var(--bs-border-color) 1px,
+ transparent 1px
+ );
+ background-size: 1rem 1rem;
+ }
+
+ .icon-code-snippet {
+ margin-block: 1rem;
+ }
+}
diff --git a/astro/tsconfig.json b/astro/tsconfig.json
new file mode 100644
index 0000000000..74a5c7a225
--- /dev/null
+++ b/astro/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "moduleResolution": "Bundler",
+ "types": ["node"]
+ },
+ "include": [".astro/types.d.ts", "**/*"]
+}
diff --git a/build/bump-version.mjs b/build/bump-version.mjs
index 6fb48f27f8..6d2ee8e17b 100644
--- a/build/bump-version.mjs
+++ b/build/bump-version.mjs
@@ -15,8 +15,7 @@ const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-r
// These are the files we only care about replacing the version
const FILES = [
'build/font/css.hbs',
- 'build/font/scss.hbs',
- 'hugo.yml'
+ 'build/font/scss.hbs'
]
// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
@@ -56,7 +55,7 @@ function bumpNpmVersion(newVersion) {
return
}
- execFile('npm', ['version', newVersion, '--no-git-tag'], { shell: true }, (error) => {
+ execFile('npm', ['version', newVersion, '--no-git-tag-version'], { shell: true }, (error) => {
if (error) {
console.error(error)
process.exit(1)
diff --git a/build/check-release-artifacts.mjs b/build/check-release-artifacts.mjs
new file mode 100644
index 0000000000..539b95b623
--- /dev/null
+++ b/build/check-release-artifacts.mjs
@@ -0,0 +1,110 @@
+import { spawnSync } from 'node:child_process'
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = path.resolve(fileURLToPath(new URL('../', import.meta.url)))
+const packageJson = JSON.parse(
+ fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+)
+
+const listFiles = (directory, prefix = '') => {
+ const files = []
+ for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+ if (entry.name === '.DS_Store') continue
+ const relative = path.posix.join(prefix, entry.name)
+ const fullPath = path.join(directory, entry.name)
+ if (entry.isDirectory()) files.push(...listFiles(fullPath, relative))
+ else files.push(relative)
+ }
+ return files
+}
+
+const expectedPackageFiles = [
+ 'LICENSE',
+ 'README.md',
+ 'package.json',
+ 'bootstrap-icons.svg',
+ ...listFiles(path.join(root, 'font'), 'font'),
+ ...listFiles(path.join(root, 'icons'), 'icons')
+].sort()
+
+const pack = spawnSync('npm', ['pack', '--dry-run', '--json'], {
+ cwd: root,
+ encoding: 'utf8'
+})
+if (pack.status !== 0) {
+ throw new Error(pack.stderr || 'npm pack --dry-run failed.')
+}
+const packResult = JSON.parse(pack.stdout)
+const packageResult = Array.isArray(packResult)
+ ? packResult[0]
+ : packResult[packageJson.name]
+const packedFiles = packageResult.files
+ .map(({ path: file }) => file)
+ .sort()
+if (
+ packedFiles.length !== expectedPackageFiles.length ||
+ expectedPackageFiles.some((file, index) => packedFiles[index] !== file)
+) {
+ throw new Error('The npm package file contract changed.')
+}
+
+const archiveName = `bootstrap-icons-${packageJson.version}.zip`
+const archivePath = path.join(root, archiveName)
+if (!fs.existsSync(archivePath)) {
+ throw new Error(`Missing release archive: ${archiveName}`)
+}
+
+const temporaryDirectory = fs.mkdtempSync(
+ path.join(os.tmpdir(), 'bootstrap-icons-release-')
+)
+try {
+ const unzip = spawnSync('unzip', ['-qq', archivePath, '-d', temporaryDirectory])
+ if (unzip.status !== 0) {
+ throw new Error(unzip.stderr?.toString() || 'Unable to inspect release ZIP.')
+ }
+
+ const archiveRoot = path.join(
+ temporaryDirectory,
+ `bootstrap-icons-${packageJson.version}`
+ )
+ const expectedArchiveFiles = [
+ 'bootstrap-icons.svg',
+ ...listFiles(path.join(root, 'font')),
+ ...listFiles(path.join(root, 'icons'))
+ ].sort()
+ const archiveFiles = listFiles(archiveRoot).sort()
+
+ if (
+ archiveFiles.length !== expectedArchiveFiles.length ||
+ expectedArchiveFiles.some((file, index) => archiveFiles[index] !== file)
+ ) {
+ throw new Error('The release ZIP file contract changed.')
+ }
+
+ for (const file of expectedArchiveFiles) {
+ const fontSource = path.join(root, 'font', file)
+ const source = fs.existsSync(fontSource)
+ ? fontSource
+ : file === 'bootstrap-icons.svg'
+ ? path.join(root, file)
+ : path.join(root, 'icons', file)
+ if (
+ !fs
+ .readFileSync(source)
+ .equals(fs.readFileSync(path.join(archiveRoot, file)))
+ ) {
+ throw new Error(`The release ZIP changed ${file}.`)
+ }
+ }
+} finally {
+ fs.rmSync(temporaryDirectory, { recursive: true, force: true })
+}
+
+console.log(
+ `Validated ${packedFiles.length.toLocaleString()} npm files and ${(
+ packedFiles.length - 3
+ ).toLocaleString()} byte-identical release ZIP files.`
+)
diff --git a/build/font/css.hbs b/build/font/css.hbs
index 737e4c0480..c234cbc4c0 100644
--- a/build/font/css.hbs
+++ b/build/font/css.hbs
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/)
+ * Bootstrap Icons v1.13.2 (https://icons.getbootstrap.com/)
* Copyright 2019-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
*/
diff --git a/build/font/scss.hbs b/build/font/scss.hbs
index 391ebe0e03..4d7ef45d55 100644
--- a/build/font/scss.hbs
+++ b/build/font/scss.hbs
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/)
+ * Bootstrap Icons v1.13.2 (https://icons.getbootstrap.com/)
* Copyright 2019-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
*/
diff --git a/build/vnu-jar.mjs b/build/vnu-jar.mjs
index ba750d30ff..cbaba36cc6 100644
--- a/build/vnu-jar.mjs
+++ b/build/vnu-jar.mjs
@@ -9,6 +9,8 @@
import { execFile, spawn } from 'node:child_process'
import vnu from 'vnu-jar'
+const target = process.argv[2] ?? '_site/'
+
execFile('java', ['-version'], (error, _stdout, stderr) => {
if (error) {
console.error('Skipping vnu-jar test; Java is probably missing.')
@@ -23,17 +25,22 @@ execFile('java', ['-version'], (error, _stdout, stderr) => {
// vnu-jar accepts multiple ignores joined with a `|`.
// Also note that the ignores are string regular expressions.
const ignores = [
+ // Shiki's canonical dual-theme output uses CSS Color 5 `light-dark()`
+ // inline declarations. The validator does not parse that function and
+ // reports its following fallback/custom-property colors as invalid too.
+ '.*CSS:.*'
].join('|')
const args = [
'-jar',
String(vnu),
'--asciiquotes',
+ '--no-langdetect',
'--skip-non-html',
'--Werror',
'--filterpattern',
ignores,
- '_site/'
+ target
]
// For the 32-bit Java we need to pass `-Xss512k`
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
deleted file mode 100644
index 571f477cc4..0000000000
--- a/docs/assets/js/application.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import ClipboardJS from 'clipboard'
-
-(function () {
- const btnHtml = [
- '',
- '',
- '
'].join('')
-
- document.querySelectorAll('div.highlight')
- .forEach(element => {
- element.insertAdjacentHTML('beforebegin', btnHtml)
- })
-
- const clipboard = new ClipboardJS('.btn-clipboard', {
- target(trigger) {
- return trigger.parentNode.nextElementSibling
- }
- })
-
- clipboard.on('success', event => {
- const icon = event.trigger.querySelector('.bi')
- const originalTitle = event.trigger.title
-
- event.clearSelection()
- icon.classList.replace('bi-clipboard', 'bi-check2')
- event.trigger.title = 'Copied!'
-
- setTimeout(() => {
- icon.classList.replace('bi-check2', 'bi-clipboard')
- event.trigger.title = originalTitle
- }, 2000)
- })
-
- clipboard.on('error', () => {
- const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
- const fallbackMsg = `Press ${modifierKey}C to copy`
- const errorElement = document.getElementById('copy-error-callout')
-
- if (!errorElement) {
- return
- }
-
- errorElement.classList.remove('d-none')
- errorElement.insertAdjacentHTML('afterbegin', fallbackMsg)
- })
-
- const searchInput = document.getElementById('search')
- if (searchInput) {
- searchInput.addEventListener('keydown', event => {
- if (event.key === 'Enter') {
- event.preventDefault()
- }
- })
- }
-
- // Disable empty links in docs
- document.querySelectorAll('[href="#"]')
- .forEach(link => {
- link.addEventListener('click', event => {
- event.preventDefault()
- })
- })
-})()
diff --git a/docs/assets/js/color-modes.js b/docs/assets/js/color-modes.js
deleted file mode 100644
index f14a3be9d5..0000000000
--- a/docs/assets/js/color-modes.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*!
- * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
- */
-
-(() => {
- const getStoredTheme = () => localStorage.getItem('theme')
- const setStoredTheme = theme => localStorage.setItem('theme', theme)
-
- const getPreferredTheme = () => {
- const storedTheme = getStoredTheme()
- if (storedTheme) {
- return storedTheme
- }
-
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
- }
-
- const setTheme = theme => {
- if (theme === 'auto') {
- document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
- } else {
- document.documentElement.setAttribute('data-bs-theme', theme)
- }
- }
-
- setTheme(getPreferredTheme())
-
- const showActiveTheme = (theme, focus = false) => {
- const themeSwitcher = document.querySelector('#bd-theme')
-
- if (!themeSwitcher) {
- return
- }
-
- const themeSwitcherText = document.querySelector('#bd-theme-text')
- const activeThemeIcon = document.querySelector('.theme-icon-active use')
- const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
- const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
-
- document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
- element.classList.remove('active')
- element.setAttribute('aria-pressed', 'false')
- })
-
- btnToActive.classList.add('active')
- btnToActive.setAttribute('aria-pressed', 'true')
- activeThemeIcon.setAttribute('href', svgOfActiveBtn)
- const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
- themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
-
- if (focus) {
- themeSwitcher.focus()
- }
- }
-
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
- const storedTheme = getStoredTheme()
- if (storedTheme !== 'light' && storedTheme !== 'dark') {
- setTheme(getPreferredTheme())
- }
- })
-
- window.addEventListener('DOMContentLoaded', () => {
- showActiveTheme(getPreferredTheme())
-
- document.querySelectorAll('[data-bs-theme-value]')
- .forEach(toggle => {
- toggle.addEventListener('click', () => {
- const theme = toggle.getAttribute('data-bs-theme-value')
- localStorage.setItem('theme', theme)
- setStoredTheme(theme)
- setTheme(theme)
- showActiveTheme(theme, true)
- })
- })
- })
-})()
diff --git a/docs/assets/js/search.js b/docs/assets/js/search.js
deleted file mode 100644
index 98b9eeaf52..0000000000
--- a/docs/assets/js/search.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Fuse from 'fuse.js'
-
-(function () {
- const iconsBody = document.querySelector('#icons-body')
-
- if (!iconsBody) return
-
- const searchInput = iconsBody.querySelector('#search')
- const iconListContainer = iconsBody.querySelector('#icons-list')
- const iconElementList = Array.from(iconListContainer.children)
-
- const iconDataList = iconElementList.map(element => ({
- name: element.dataset.name || '',
- categories: element.dataset.categories ? element.dataset.categories.split(' ') : [],
- tags: element.dataset.tags ? element.dataset.tags.split(' ') : []
- }))
-
- const fuse = new Fuse(iconDataList, {
- ignoreLocation: true,
- useExtendedSearch: true,
- shouldSort: false,
- keys: ['name', 'categories', 'tags'],
- threshold: 0
- })
-
- function search(searchTerm) {
- const trimmedSearchTerm = searchTerm ? searchTerm.trim() : ''
-
- iconListContainer.innerHTML = ''
- if (trimmedSearchTerm.length > 0) {
- const searchResult = fuse.search(trimmedSearchTerm)
- const resultElements = searchResult.map(result => iconElementList[result.refIndex])
- iconListContainer.append(...resultElements)
- } else {
- iconListContainer.append(...iconElementList)
- }
-
- const newUrl = new URL(window.location)
- if (trimmedSearchTerm.length > 0) {
- newUrl.searchParams.set('q', trimmedSearchTerm)
- } else {
- newUrl.searchParams.delete('q')
- }
-
- window.history.replaceState(null, null, newUrl)
- }
-
- let timeout
- searchInput.addEventListener('input', () => {
- clearTimeout(timeout)
- timeout = setTimeout(() => {
- search(searchInput.value)
- }, 250)
- })
-
- const query = new URLSearchParams(window.location.search).get('q')
- if (!query || query.length === 0) return
-
- const trimmedQuery = query.trim()
- search(trimmedQuery)
- searchInput.value = trimmedQuery
- document.querySelector('#content').scrollIntoView()
-})()
diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss
deleted file mode 100644
index 27612c0a9e..0000000000
--- a/docs/assets/scss/_ads.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-// stylelint-disable-next-line selector-max-id
-#carbonads {
- max-width: 28rem;
- padding: .75rem;
- margin-right: auto;
- margin-left: auto;
- overflow: auto;
- background-color: var(--bs-tertiary-bg);
- border-radius: .25rem;
-
- @media (min-width: 992px) {
- margin-right: 0;
- margin-left: 0;
- }
-}
-
-.carbon-img {
- float: left;
- margin-right: .75rem;
-
- @media (min-width: 768px) {
- margin-bottom: .5rem;
- }
-
- @media (min-width: 992px) {
- margin-bottom: 0;
- }
-}
-
-.carbon-text,
-.carbon-poweredby {
- display: block;
- color: var(--bs-body-color);
-
- &:hover,
- &:focus {
- color: var(--bs-body-color);
- text-decoration: none;
- }
-}
-
-.carbon-text {
- margin-bottom: .5rem;
- text-decoration: none;
-
- @media (min-width: 768px) {
- font-size: .875rem;
- }
-}
-
-.carbon-poweredby {
- margin-top: .75rem;
- font-size: .875rem;
-}
diff --git a/docs/assets/scss/_buttons.scss b/docs/assets/scss/_buttons.scss
deleted file mode 100644
index 13bd6e48a3..0000000000
--- a/docs/assets/scss/_buttons.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-// Buttons
-//
-// Custom buttons for the docs.
-
-// scss-docs-start btn-css-vars-example
-.btn-bd-primary {
- --bs-btn-font-weight: 600;
- --bs-btn-color: var(--bs-white);
- --bs-btn-bg: var(--bd-violet);
- --bs-btn-border-color: var(--bd-violet);
- --bs-btn-border-radius: .5rem;
- --bs-btn-hover-color: var(--bs-white);
- --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
- --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
- --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
- --bs-btn-active-color: var(--bs-btn-hover-color);
- --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
- --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
-}
-// scss-docs-end btn-css-vars-example
-
-.btn-bd-accent {
- --bs-btn-font-weight: 600;
- --bs-btn-color: var(--bd-accent);
- --bs-btn-border-color: var(--bd-accent);
- --bs-btn-hover-color: var(--bd-dark);
- --bs-btn-hover-bg: var(--bd-accent);
- --bs-btn-hover-border-color: var(--bd-accent);
- --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
- --bs-btn-active-color: var(--bs-btn-hover-color);
- --bs-btn-active-bg: var(--bs-btn-hover-bg);
- --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
-}
-
-.btn-bd-light {
- --bs-btn-color: var(--bs-gray-600);
- --bs-btn-border-color: var(--bs-gray-400);
- --bs-btn-hover-color: var(--bd-violet);
- --bs-btn-hover-border-color: var(--bd-violet);
- --bs-btn-active-color: var(--bd-violet);
- --bs-btn-active-bg: var(--bs-white);
- --bs-btn-active-border-color: var(--bd-violet);
- --bs-btn-focus-border-color: var(--bd-violet);
- --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-}
diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
deleted file mode 100644
index 232b7f4dc6..0000000000
--- a/docs/assets/scss/_clipboard-js.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-// clipboard.js
-//
-// JS-based `Copy` buttons for code snippets.
-
-.bd-clipboard {
- position: relative;
- display: none;
- float: right;
-
- + .highlight {
- margin-top: 0;
- }
-
- @media (min-width: 768px) {
- display: block;
- }
-}
-
-.btn-clipboard {
- position: absolute;
- top: .75em;
- right: .5em;
- z-index: 10;
- display: block;
- padding: .5em .75em .625em;
- line-height: 1;
- color: var(--bs-body-color);
- background-color: var(--bs-tertiary-bg);
- border: 0;
- border-radius: .25rem;
-
- &:hover {
- color: var(--bs-link-hover-color);
- }
-}
diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss
deleted file mode 100644
index 42e1ca051a..0000000000
--- a/docs/assets/scss/_footer.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// Footer
-//
-
-.bd-footer {
- a {
- color: var(--bs-body-color);
- text-decoration: none;
-
- &:hover,
- &:focus {
- color: var(--bs-link-hover-color);
- text-decoration: underline;
- }
- }
-}
diff --git a/docs/assets/scss/_navbar.scss b/docs/assets/scss/_navbar.scss
deleted file mode 100644
index c16ada791a..0000000000
--- a/docs/assets/scss/_navbar.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-.bd-navbar {
- padding: .75rem 0;
- background-color: transparent;
- background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
- box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
-
- .bi {
- width: 1em;
- height: 1em;
- }
-
- .navbar-toggler {
- padding: 0;
- margin-right: -.5rem;
- border: 0;
-
- &:first-child {
- margin-left: -.5rem;
- }
-
- .bi {
- width: 1.5rem;
- height: 1.5rem;
- }
-
- &:focus {
- box-shadow: none;
- }
- }
-
- .navbar-brand {
- transition: .2s ease-in-out transform;
-
- &:hover {
- transform: rotate(-5deg) scale(1.1);
- }
- }
-
- .navbar-toggler,
- .nav-link {
- padding-right: $spacer * .25;
- padding-left: $spacer * .25;
- color: rgba($white, .85);
-
- &:hover,
- &:focus {
- color: $white;
- }
-
- &.active {
- font-weight: 600;
- color: $white;
- }
- }
-
- .navbar-nav-svg {
- display: inline-block;
- vertical-align: -.125rem;
- }
-
- .offcanvas-lg {
- background-color: var(--bd-violet);
- border-left: 0;
-
- @media (max-width: 992px) {
- box-shadow: $box-shadow-lg;
- }
- }
-
- .dropdown-menu {
- --bs-dropdown-min-width: 12rem;
- --bs-dropdown-padding-x: .25rem;
- --bs-dropdown-padding-y: .25rem;
- --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
- --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
- @include rfs(.875rem, --bs-dropdown-font-size);
- @include font-size(.875rem);
- @include border-radius(.5rem);
- box-shadow: $dropdown-box-shadow;
-
- li + li {
- margin-top: .125rem;
- }
-
- .dropdown-item {
- @include border-radius(.25rem);
-
- &:active {
- .bi {
- color: inherit !important; // stylelint-disable-line declaration-no-important
- }
- }
- }
-
- .active {
- font-weight: 600;
-
- .bi {
- display: block !important; // stylelint-disable-line declaration-no-important
- }
- }
- }
-
- .dropdown-menu-end {
- --bs-dropdown-min-width: 8rem;
- }
-}
-
-@include color-mode(dark) {
- .bd-navbar {
- box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
- }
-}
diff --git a/docs/assets/scss/_skippy.scss b/docs/assets/scss/_skippy.scss
deleted file mode 100644
index 459c203a51..0000000000
--- a/docs/assets/scss/_skippy.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.skippy {
- display: block;
- padding: 1em;
- color: #fff;
- text-align: center;
- background-color: $bd-purple;
- outline: 0;
-
- &:hover {
- color: #fff;
- }
-}
-
-.skippy-text {
- padding: .5em;
- outline: 1px dotted;
-}
diff --git a/docs/assets/scss/_syntax.scss b/docs/assets/scss/_syntax.scss
deleted file mode 100644
index 092307e058..0000000000
--- a/docs/assets/scss/_syntax.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-:root,
-[data-bs-theme="light"] {
- --base00: #fff;
- --base01: #f5f5f5;
- --base02: #c8c8fa;
- --base03: #565c64;
- --base04: #030303;
- --base05: #333;
- --base06: #fff;
- --base07: #9a6700;
- --base08: #bc4c00;
- --base09: #087990;
- --base0A: #795da3;
- --base0B: #183691;
- --base0C: #183691;
- --base0D: #795da3;
- --base0E: #a71d5d;
- --base0F: #333;
-}
-
-@include color-mode(dark, true) {
- --base00: #282c34;
- --base01: #353b45;
- --base02: #3e4451;
- --base03: #868e96;
- --base04: #565c64;
- --base05: #abb2bf;
- --base06: #b6bdca;
- --base07: #d19a66;
- --base08: #e06c75;
- --base09: #d19a66;
- --base0A: #e5c07b;
- --base0B: #98c379;
- --base0C: #56b6c2;
- --base0D: #61afef;
- --base0E: #c678dd;
- --base0F: #be5046;
-}
-
-.hl { background-color: var(--base02); }
-.c { color: var(--base03); }
-.err { color: var(--base08); }
-.k { color: var(--base0E); }
-.l { color: var(----base09); }
-.n { color: var(--base08); }
-.o { color: var(--base05); }
-.p { color: var(--base05); }
-.cm { color: var(--base04); }
-.cp { color: var(--base08); }
-.c1 { color: var(--base03); }
-.cs { color: var(--base04); }
-.gd { color: var(--base08); }
-.ge { font-style: italic; }
-.gh {
- font-weight: 600;
- color: #fff;
-}
-.gi { color: var(--bs-success); }
-.gp {
- font-weight: 600;
- color: var(--base04);
-}
-.gs { font-weight: 600; }
-.gu {
- font-weight: 600;
- color: var(--base0C);
-}
-.kc { color: var(--base0E); }
-.kd { color: var(--base0E); }
-.kn { color: var(--base0C); }
-.kp { color: var(--base0E); }
-.kr { color: var(--base0E); }
-.kt { color: var(--base0A); }
-.ld { color: var(--base0C); }
-.m { color: var(--base09); }
-.s { color: var(--base0C); }
-.na { color: var(--base0A); }
-.nb { color: var(--base05); }
-.nc { color: var(--base07); }
-.no { color: var(--base08); }
-.nd { color: var(--base07); }
-.ni { color: var(--base08); }
-.ne { color: var(--base08); }
-.nf { color: var(--base0B); }
-.nl { color: var(--base05); }
-.nn { color: var(--base0A); }
-.nx { color: var(--base0A); }
-.py { color: var(--base08); }
-.nt { color: var(--base08); }
-.nv { color: var(--base08); }
-.ow { color: var(--base0C); }
-.w { color: #fff; }
-.mf { color: var(--base09); }
-.mh { color: var(--base09); }
-.mi { color: var(--base09); }
-.mo { color: var(--base09); }
-.sb { color: var(--base0C); }
-.sc { color: #fff; }
-.sd { color: var(--base04); }
-.s2 { color: var(--base0C); }
-.se { color: var(--base09); }
-.sh { color: var(--base0C); }
-.si { color: var(--base09); }
-.sx { color: var(--base0C); }
-.sr { color: var(--base0C); }
-.s1 { color: var(--base0C); }
-.ss { color: var(--base0C); }
-.bp { color: var(--base05); }
-.vc { color: var(--base08); }
-.vg { color: var(--base08); }
-.vi { color: var(--base08); }
-.il { color: var(--base09); }
-
-// Color commas in rgba() values
-.m + .o { color: var(--base03); }
-
-// Fix bash
-.language-sh .c { color: var(--base03); }
-
-.chroma {
- .language-bash,
- .language-sh {
- .line::before {
- color: var(--base03);
- content: "$ ";
- user-select: none;
- }
- }
-
- .language-powershell::before {
- color: var(--base0C);
- content: "PM> ";
- user-select: none;
- }
-}
diff --git a/docs/assets/scss/_variables.scss b/docs/assets/scss/_variables.scss
deleted file mode 100644
index 167b89df1c..0000000000
--- a/docs/assets/scss/_variables.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// Local docs variables
-$bd-purple: #4c0bce;
-$bd-violet: lighten(saturate($bd-purple, 5%), 15%);
-$bd-accent: #ffe484;
-$bd-gutter-x: 3rem;
-
-:root {
- --bd-purple: #{$bd-purple};
- --bd-violet: #{$bd-violet};
- --bd-accent: #{$bd-accent};
- --bd-violet-rgb: #{to-rgb($bd-violet)};
- --bd-accent-rgb: #{to-rgb($bd-accent)};
- --bd-pink-rgb: #{to-rgb($pink-500)};
- --bd-teal-rgb: #{to-rgb($teal-500)};
-}
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
deleted file mode 100644
index a3ae687e9a..0000000000
--- a/docs/assets/scss/docs.scss
+++ /dev/null
@@ -1,237 +0,0 @@
-@import "bootstrap/functions";
-@import "bootstrap/variables";
-@import "bootstrap/variables-dark";
-@import "bootstrap/maps";
-@import "bootstrap/mixins";
-@import "bootstrap/utilities";
-@import "bootstrap/root";
-@import "bootstrap/reboot";
-@import "bootstrap/type";
-@import "bootstrap/images";
-@import "bootstrap/containers";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap/forms";
-@import "bootstrap/buttons";
-@import "bootstrap/transitions";
-@import "bootstrap/dropdown";
-@import "bootstrap/button-group";
-@import "bootstrap/nav";
-@import "bootstrap/navbar";
-// @import "bootstrap/card";
-// @import "bootstrap/accordion";
-@import "bootstrap/breadcrumb";
-// @import "bootstrap/pagination";
-// @import "bootstrap/badge";
-// @import "bootstrap/alert";
-// @import "bootstrap/progress";
-// @import "bootstrap/list-group";
-@import "bootstrap/close";
-// @import "bootstrap/toasts";
-// @import "bootstrap/modal";
-// @import "bootstrap/tooltip";
-// @import "bootstrap/popover";
-// @import "bootstrap/carousel";
-// @import "bootstrap/spinners";
-@import "bootstrap/offcanvas";
-// @import "bootstrap/placeholders";
-@import "bootstrap/helpers";
-@import "bootstrap/utilities/api";
-
-@import "variables";
-@import "buttons";
-@import "clipboard-js";
-@import "navbar";
-@import "skippy";
-@import "footer";
-@import "syntax";
-@import "ads";
-
-:root {
- color-scheme: light dark;
-}
-
-.bd-gutter {
- --bs-gutter-x: #{$bd-gutter-x};
-}
-
-.bi {
- display: inline-block;
- vertical-align: -.125em;
- fill: currentcolor;
-}
-
-.hero-notice {
- color: var(--bs-info-text);
- background-color: var(--bs-info-bg-subtle);
- border: 1px solid var(--bs-info-border-subtle);
-
- @media (min-width: 540px) {
- border-radius: 5em !important; // stylelint-disable-line declaration-no-important
- }
-}
-
-.btn-figma {
- --bs-btn-color: var(--bs-emphasis-color);
- --bs-btn-border-color: var(--bs-emphasis-color);
- --bs-btn-hover-color: var(--bs-body-bg);
- --bs-btn-hover-bg: var(--bs-emphasis-color);
- --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-}
-
-.highlight {
- position: relative;
- padding: 1.25rem;
- margin-bottom: 1rem;
- background-color: var(--bs-tertiary-bg);
- border-radius: var(--bs-border-radius);
-
- pre {
- padding: 0;
- margin-bottom: 0;
- white-space: pre;
- background-color: transparent;
- border: 0;
- }
-
- pre code {
- @include font-size(inherit);
- word-wrap: normal;
- }
-}
-
-
-.bd-example {
- padding: 1.25rem;
- border: 1px solid var(--bs-border-color);
- border-top-left-radius: .25rem;
- border-top-right-radius: .25rem;
-
- + .bd-clipboard + .highlight {
- border: 1px solid var(--bs-border-color);
- border-width: 0 1px 1px;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
-}
-
-.f0 {
- font-size: 2rem;
-
- @media (min-width: 520px) {
- font-size: 3rem;
- }
-}
-.f3 {
- font-size: 1.25rem;
-
- @media (min-width: 520px) {
- font-size: 1.5rem;
- }
-}
-.f5 {
- font-size: 1rem;
-}
-
-.hero {
- border-bottom: 1px solid var(--bs-border-color-translucent);
-
- .highlight {
- margin-bottom: 0;
- background-color: var(--bs-tertiary-bg);
- border-radius: .5rem;
-
- pre {
- margin-bottom: 0;
-
- @media (min-width: 768px) {
- padding-right: 4em;
- }
- }
- }
-
- .btn-clipboard {
- top: .5em;
- background-color: var(--bs-tertiary-bg);
- }
-
- .btn {
- padding: 1rem 1.25rem;
- border-radius: .5rem;
- }
-
- hr {
- max-width: 100px;
- }
-}
-
-.icon-search {
- @media (min-width: 768px) {
- width: 35%;
- }
-}
-
-.list {
- font-size: 2rem;
-
- // stylelint-disable declaration-no-important
- a:hover,
- a:focus {
- &,
- .name {
- color: var(--bs-link-hover-color) !important;
- }
- }
- // stylelint-enable declaration-no-important
-
- &:empty::before {
- display: block;
- width: 100%;
- padding: 100px 2rem;
- margin-right: 15px;
- margin-left: 15px;
- color: var(--bs-secondary-color);
- text-align: center;
- content: "Nothing found, try searching again.";
- background-color: var(--bs-secondary-bg);
- border-radius: .5rem;
- }
-}
-
-.btn-group > .btn {
- flex-shrink: 0;
-}
-
-.name {
- font-size: .8125rem;
-}
-
-@media (min-width: 1200px) {
- .row-cols-xl-8 {
- > * {
- flex: 0 0 12.5%;
- max-width: 12.5%;
- }
- }
-}
-
-.icon-demo {
- background-color: var(--bs-tertiary-bg);
- background-image: radial-gradient(circle, var(--bs-border-color) 1px, rgba(0, 0, 0, 0) 1px);
- background-size: 1rem 1rem;
-}
-
-.icon-demo,
-.icon-demo-examples {
- .bi {
- width: 1em;
- height: 1em;
- }
-}
-
-// stylelint-disable declaration-no-important
-.py-6 {
- padding-top: 4.5rem !important;
- padding-bottom: 4.5rem !important;
-}
-// stylelint-enable declaration-no-important
diff --git a/docs/content/404.md b/docs/content/404.md
deleted file mode 100644
index 5beda81f5d..0000000000
--- a/docs/content/404.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: "404 - File not found"
-description: ""
-layout: 404
-url: /404.html
-robots: noindex,follow
-sitemap_exclude: true
----
-
-
-
404
- File not found
-
diff --git a/docs/content/_index.md b/docs/content/_index.md
deleted file mode 100644
index c082ba0db0..0000000000
--- a/docs/content/_index.md
+++ /dev/null
@@ -1,248 +0,0 @@
----
-aliases:
- - /font/
----
-
-## Install
-
-Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.
-
-
-
-{{< md >}}
-### Package manager
-Install [Bootstrap Icons](https://www.npmjs.com/package/bootstrap-icons)—including SVGs, icon sprite, and icon fonts—with npm or Composer. Then, choose how you'd like to include the icons with the [usage instructions](#usage).
-
-{{< highlight sh >}}
-npm i bootstrap-icons
-{{< /highlight >}}
-{{< highlight sh >}}
-composer require twbs/bootstrap-icons
-{{< /highlight >}}
-{{< /md >}}
-
-
-{{< md >}}
-### Download
-[Releases are published on GitHub](https://github.com/twbs/icons/releases/) and include icon SVGs, fonts, license, and readme. Our `package.json` is also included, though our npm scripts are primarily available for our development workflows.
-
-
Download latest ZIP
-{{< /md >}}
-
-
-{{< md >}}
-### CDN
-Include the icon fonts stylesheet—in your website `` or via `@import` in CSS—from jsDelivr and get started in seconds. [See icon font docs](#icon-font) for examples.
-
-{{< highlight html >}}
-
-{{< /highlight >}}
-
-{{< highlight css >}}
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@{{< param version >}}/font/bootstrap-icons.min.css");
-{{< /highlight >}}
-{{< /md >}}
-
-
-
-{{< md >}}
-### Embedded
-Embed your icons within the HTML of your page (as opposed to an external image file). Here we've used a custom `width` and `height`.
-{{< /md >}}
-
-
- {{< example >}}
{{< /example >}}
-
-
-
-{{< md >}}
-### Sprite
-Use the SVG sprite to insert any icon through the `
-
-
-
-
-
-
-
-{{< highlight html >}}
-
-
-
-{{< /highlight >}}
-
-
-
-{{< md >}}
-### External image
-Copy the Bootstrap Icons SVGs to your directory of choice and reference them like normal images with the `
![]()
` element.
-{{< /md >}}
-
-
- {{< example >}}
{{< /example >}}
-
-
-
-{{< md >}}
-### Icon font
-Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., ``).
-
-Use `font-size` and `color` to change the icon appearance.
-{{< /md >}}
-
-
- {{< example >}}{{< /example >}}
- {{< example >}}{{< /example >}}
-
-
-
-{{< md >}}
-### Sass
-When using Bootstrap in a Sass project, you may need to adjust the `$bootstrap-icons-font-dir` variable to point to where your files are installed (most commonly `node_modules`, assuming you're using npm).
-
-**Heads up!** This is currently required [for Vite](https://github.com/vitejs/vite/issues/11012) and [Parcel](https://github.com/parcel-bundler/parcel/issues/6285) as their Sass compilers aren‘t happy with relative URLs.
-{{< /md >}}
-
-
-{{< highlight scss >}}
-// Update the import directory to point to it‘s location within node_modules
-$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
-
-// Import the Sass files as usual
-@import "bootstrap-icons/font/bootstrap-icons";
-
-{{< /highlight >}}
-
-
-
-{{< md >}}
-### CSS
-You can also use the SVG within your CSS (**be sure to escape any characters**, such as `#` to `%23` when specifying hex color values). When no dimensions are specified via `width` and `height` on the `
-
-{{< highlight css >}}
-.bi::before {
- display: inline-block;
- content: "";
- vertical-align: -.125em;
- background-image: url("data:image/svg+xml,
");
- background-repeat: no-repeat;
- background-size: 1rem 1rem;
-}
-
-{{< /highlight >}}
-
-
-
-{{< md >}}
-## Styling
-Color can be changed by setting a `.text-*` class or custom CSS:
-{{< /md >}}
-
-
-
-{{< highlight html >}}
-
-{{< /highlight >}}
-
-
-
-{{< md >}}
-## Accessibility
-For purely decorative icons, add `aria-hidden="true"`. Otherwise, provide an appropriate text alternative. Depending on which method you're using to add the icons, and where you're using them (e.g. as standalone images, or as the only content of a button or similar control), there are various possible approaches. Here are a few examples:
-{{< /md >}}
-
-
-
-
-
-{{< highlight html >}}
-
-
-{{< /highlight >}}
-
-
-
-
-{{< highlight html >}}
-
-{{< /highlight >}}
-
-{{< highlight html >}}
-
-
-{{< /highlight >}}
-
-
-
-{{< md >}}
-## Working with SVGs
-SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, we haven't included these attributes and workarounds in our code.
-{{< /md >}}
-
-
-{{< md >}}
-Known issues include:
-
-- **SVGs receive focus by default in Internet Explorer and Edge Legacy.** When embedding your SVGs, add `focusable="false"` to the `
-
-
-
{{ .Title }}
-
- {{ if or .Params.tags .Params.categories -}}
-
- {{ with .Params.tags }}- Tags: {{ delimit . ", " }}
{{ end }}
- {{ with .Params.categories }}- Category: {{ delimit . ", " }}
{{ end }}
-
- {{- end }}
-
-
- {{ partialCached "ads" . }}
-
-
-
- {{- $localSvgPath := printf "/icons/%s.svg" .File.TranslationBaseName -}}
- {{- $svgPath := path.Join "/assets/" $localSvgPath -}}
- {{- $svgHtml := readFile $localSvgPath | chomp | safeHTML -}}
-
-
-
-
- {{ $svgHtml }}
-
-
-
Examples
-
-
- {{ $svgHtml }}
- Heading
-
-
- {{ $svgHtml }}
- Smaller heading
-
-
- Inline text {{ $svgHtml }}
-
-
-
- Example link text
- {{ $svgHtml }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $svgHtml }}
-
-
-
-
-
-
-
-
Download
-
Download the SVG to use or edit.
-
Download SVG
-
-
Icon font
-
Using the web font? Copy, paste, and go.
-
-
- {{ $iconFontSnippet := printf `` .File.TranslationBaseName -}}
- {{- highlight $iconFontSnippet "html" "" }}
-
-
-
Code point
-
- {{ $codepointsResource := resources.Get "font/bootstrap-icons.json" -}}
- {{ $codepoints := $codepointsResource | transform.Unmarshal -}}
- {{ $hexCodepoint := printf "%X" (int (index $codepoints .File.TranslationBaseName)) }}
-
- -
- Unicode:
U+{{- $hexCodepoint}}
-
- -
- CSS:
\{{- $hexCodepoint}}
-
- -
- JS:
\u{{- $hexCodepoint}}
-
- -
- HTML:
&#x{{- $hexCodepoint}};
-
-
-
-
-
Copy HTML
-
Paste the SVG right into your project's code.
-
-
-
- {{ highlight $svgHtml "html" "" }}
-
-
-
-
-
-
-
-
-
-
-
+```
+
+### SVG sprite
+
+The package includes `bootstrap-icons.svg`. Copy it to your own origin and use an icon filename as the fragment identifier. Cross-origin external sprites are restricted by some browsers, so serve the sprite with your application.
+
+```html
+
+```
+
+See the [complete sprite guide](https://icons.getbootstrap.com/sprite/) for local and external examples.
+
+### Icon font
+
+Include the icon font stylesheet, then combine the base `bi` class with an icon class based on its filename. Font icons inherit the current text size and color.
+
+```html
+
+```
+
+When your Sass compiler cannot resolve the package's relative font URLs, set the font directory before importing the source:
+
+```scss
+$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
+@import "bootstrap-icons/font/bootstrap-icons";
+```
+
+See the [icon font guide](https://icons.getbootstrap.com/font/) for class examples and the generated font stylesheet.
+
+### Sizing and color
+
+Embedded SVGs and the icon font use `currentColor`. Set `color` directly and set `font-size` when the icon dimensions are `1em`.
+
+```css
+.feature-icon {
+ color: cornflowerblue;
+ font-size: 2rem;
+}
+```
+
+### Accessibility
+
+Hide purely decorative icons from assistive technology with `aria-hidden="true"`. Meaningful standalone images need an appropriate text alternative. For icon-only controls, put the accessible name on the control—not on its decorative child icon.
+
+```html
+
+```
+
+Prefer visible text when possible. A visible label or a `visually-hidden` label stays available to screen readers and supports users who may not recognize an icon.
+
+### Use in CSS
+
+SVG data URLs work in CSS, but URL-sensitive characters must be escaped—for example, `#` becomes `%23`. Keep the `viewBox` when resizing with `background-size`, and include the SVG namespace.
+
+```css
+.icon-example {
+ width: 1rem;
+ height: 1rem;
+ background-image: url("data:image/svg+xml,");
+ background-repeat: no-repeat;
+ background-size: 1rem 1rem;
+}
+```
+
+## Figma
+
+The official Bootstrap Icons community file makes the icon set [available in Figma](https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons) for design work.
-- Copy-paste SVGs as embedded HTML
-- Reference via `