### Clone and Set Up Bootstrap Icons Development Environment Source: https://github.com/twbs/icons/blob/main/README.md Clone the Bootstrap Icons repository, install its dependencies, and start the local development server to view the documentation and test changes. ```shell git clone https://github.com/twbs/icons/ cd icons npm i npm start ``` -------------------------------- ### Install Bootstrap Icons with npm Source: https://github.com/twbs/icons/blob/main/README.md Use this command to install Bootstrap Icons as a dependency in your project via npm. ```shell npm i bootstrap-icons ``` -------------------------------- ### Install Bootstrap Icons with Composer Source: https://github.com/twbs/icons/blob/main/README.md For projects using Packagist, install Bootstrap Icons using Composer with this command. ```shell composer require twbs/bootstrap-icons ``` -------------------------------- ### Include via CDN Source: https://context7.com/twbs/icons/llms.txt Reference the icon font stylesheet from the jsDelivr CDN to use icons without local installation. ```html ``` ```css /* Or import in CSS */ @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"); ``` -------------------------------- ### Include Bootstrap Icons via CDN (Stylesheet) Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Link the Bootstrap Icons stylesheet from jsDelivr in your HTML's `` to quickly start using icon fonts. Ensure the version parameter matches your desired Bootstrap Icons version. ```html ``` -------------------------------- ### Development Build Scripts for Bootstrap Icons Source: https://context7.com/twbs/icons/llms.txt Utilize npm scripts for building icons, generating fonts, and running the documentation site locally. These scripts cover tasks from optimization to release preparation. ```bash # Start local documentation server npm start # or npm run docs-serve # Process and optimize SVG icons, generate fonts and sprite npm run icons # Generate permalink pages for each icon npm run pages # Build documentation site npm run docs-build # Create release ZIP file npm run icons-zip # Run all tests npm test ``` -------------------------------- ### Configure Icons with Sass Source: https://context7.com/twbs/icons/llms.txt Define the font directory path and import the Bootstrap Icons Sass file to support module bundlers. Use @extend or map-get for custom icon styling. ```scss // Configure the font directory path for your project structure $bootstrap-icons-font-dir: "bootstrap-icons/font/fonts"; // Import the Bootstrap Icons Sass file @import "bootstrap-icons/font/bootstrap-icons"; // Custom icon styling .custom-icon { @extend .bi; font-size: 1.5rem; color: var(--bs-primary); } // Using the icon map for dynamic content .status-icon::before { font-family: "bootstrap-icons" !important; content: map-get($bootstrap-icons-map, "check-circle-fill"); } ``` -------------------------------- ### Build and Copy JavaScript Assets with Hugo Source: https://github.com/twbs/icons/blob/main/docs/layouts/partials/scripts.html Builds JavaScript files using esbuild with specified options and copies them to the assets directory. This is done conditionally for the search page in production and always for the application script. ```gohtml {{- if or .IsHome (eq .Page.Layout "sprite") -}} {{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy "/assets/js/search.js" -}} {{- end }} {{- $application := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy "/assets/js/application.js" -}} ``` -------------------------------- ### Use External Images Source: https://context7.com/twbs/icons/llms.txt Reference individual SVG files via tags. This is ideal for static icons that do not require dynamic color changes. ```html Bootstrap Heart Heart Heart Star ``` -------------------------------- ### Configure esbuild Options in Hugo Source: https://github.com/twbs/icons/blob/main/docs/layouts/partials/scripts.html Sets esbuild options, targeting ES2019 and enabling minification in production environments. This configuration is used for building JavaScript assets. ```gohtml {{- $esbuildOptions := dict "target" "es2019" -}} {{- if eq hugo.Environment "production" -}} {{- $esbuildOptions = merge $esbuildOptions (dict "minify" "true") -}} {{- end -}} ``` -------------------------------- ### Configure Sass for Bootstrap Icons Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Adjust the font directory variable and import the library to ensure correct path resolution in build tools like Vite or Parcel. ```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"; ``` -------------------------------- ### Implement Accessible Icons Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Provide text alternatives for meaningful icons or hide decorative ones using aria-hidden. ```html Bootstrap ``` ```html ``` ```html ``` -------------------------------- ### Use SVG Sprite with Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Reference icons from an SVG sprite file using the `` element. This method is efficient for including multiple icons and allows for theming with `currentColor`. Be aware of potential cross-domain issues with `` in some Chrome versions. ```html ``` -------------------------------- ### Display Icons with CSS Classes Source: https://context7.com/twbs/icons/llms.txt Use standard HTML elements with Bootstrap icon classes to render icons. These can be styled using inline styles or Bootstrap utility classes. ```html Home ``` -------------------------------- ### Access Icon Metadata via JSON Source: https://context7.com/twbs/icons/llms.txt Load icon metadata from `bootstrap-icons.json` to programmatically manage icons, retrieve Unicode codepoints, and convert them to CSS content values. ```javascript // Load icon metadata import iconsData from 'bootstrap-icons/font/bootstrap-icons.json'; // Get codepoint for an icon const heartCodepoint = iconsData['heart-fill']; // 62485 // Convert to CSS content value const cssContent = '\' + heartCodepoint.toString(16); // '\f415' // List all available icons const allIcons = Object.keys(iconsData); console.log(`Total icons: ${allIcons.length}`); // Total icons: 2000+ // Search icons by name function searchIcons(query) { return allIcons.filter(icon => icon.includes(query.toLowerCase())); } searchIcons('heart'); // ['heart', 'heart-fill', 'heart-half', 'heartbreak', ...] ``` -------------------------------- ### Use TypeScript Type Definitions for Icons Source: https://context7.com/twbs/icons/llms.txt Leverage TypeScript definitions for type-safe icon references. Import `BootstrapIconsId` to ensure correct icon names are used in your project. ```typescript import type { BootstrapIconsId } from 'bootstrap-icons/font/bootstrap-icons'; // Type-safe icon identifier const iconName: BootstrapIconsId = "heart-fill"; // Function with typed icon parameter function renderIcon(icon: BootstrapIconsId, size: number = 16): string { return ``; } // Usage renderIcon("alarm"); // Valid renderIcon("check-circle"); // Valid // renderIcon("invalid-icon"); // TypeScript error // Icon mapping example const statusIcons: Record = { success: "check-circle-fill", warning: "exclamation-triangle-fill", error: "x-circle-fill", info: "info-circle-fill" }; ``` -------------------------------- ### Include Bootstrap Icons via CDN (@import) Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Use the `@import` rule in your CSS to include the Bootstrap Icons stylesheet from jsDelivr. This method is useful for applying icon styles globally within your project's CSS. ```css @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@{{< param version >}}/font/bootstrap-icons.min.css"); ``` -------------------------------- ### Include External SVG Image Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Reference Bootstrap Icons SVGs as external image files using the `` tag. This is a straightforward method for displaying icons as static images. ```html Bootstrap ``` -------------------------------- ### Style Icons with Bootstrap Utilities Source: https://context7.com/twbs/icons/llms.txt Apply Bootstrap utility classes to SVG icons or icon fonts. Icons with fill="currentColor" will automatically inherit the text color. ```html ``` -------------------------------- ### Style Icons with Classes Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Apply color to SVG icons using Bootstrap text utility classes or custom CSS. ```html ... ``` -------------------------------- ### Use Icon Font CSS Class Source: https://github.com/twbs/icons/blob/main/docs/layouts/icons/single.html Apply the 'bi' class along with the specific icon class to an element to display the icon using the icon font. Ensure the Bootstrap Icons CSS is included in your project. ```html ``` -------------------------------- ### Hugo Icon Preview Shortcode Source: https://github.com/twbs/icons/blob/main/docs/layouts/shortcodes/example.html This shortcode processes inner content to display an icon preview and its HTML markup. It accepts parameters for ID, CSS classes, and toggles for preview and markup visibility. ```html {{- /* Usage: `example [args]` `args` are optional and can be one of the following: id: the `div`'s id - default: "" class: any extra class(es) to be added to the `div` - default "" show_preview: if the preview should be output in the HTML - default: `true` show_markup: if the markup should be output in the HTML - default: `true` */ -}} {{- $show_preview := .Get "show_preview" | default true -}} {{- $show_markup := .Get "show_markup" | default true -}} {{- $input := .Inner -}} {{- if eq $show_preview true -}} {{- $input -}} {{- end -}} {{- if eq $show_markup true -}} {{- $content := replaceRE `\n` `![...](...)` $input -}} {{- $content = replaceRE `(class=" *?")` "" $content -}} {{- highlight (trim $content "\n") "html" "" -}} {{- end -}} ``` -------------------------------- ### CSS Content Property for Icon Source: https://github.com/twbs/icons/blob/main/docs/layouts/icons/single.html Utilize the CSS :before or :after pseudo-elements with the 'content' property to display an icon. This is a common technique for icon fonts. ```css .bi-app-indicator::before { content: "\EA3A"; } ``` -------------------------------- ### Use Icon Font Classes Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Apply Bootstrap Icons using predefined CSS classes with the `` tag. This method leverages icon fonts, allowing easy modification of icon size and color through standard CSS properties. ```html ``` ```html ``` -------------------------------- ### Use SVG Sprites Source: https://context7.com/twbs/icons/llms.txt Reference icons from an external sprite file using the element. This method supports external caching and currentColor theming. ```html ``` -------------------------------- ### Implement Accessibility for Icons Source: https://context7.com/twbs/icons/llms.txt Use `aria-hidden="true"` for decorative icons. For meaningful icons, provide an `aria-label` or use an icon within an interactive element with an appropriate label. An `img` tag with `alt` text can also be used. ```html Settings Bootstrap logo ``` -------------------------------- ### Embed SVG Icon Directly Source: https://github.com/twbs/icons/blob/main/docs/layouts/icons/single.html Paste the SVG directly into your project's HTML for immediate use. Ensure the SVG content is properly escaped if used within strings. ```html ``` -------------------------------- ### HTML Entity for Icon Source: https://github.com/twbs/icons/blob/main/docs/layouts/icons/single.html Use the HTML entity to display an icon directly in your HTML. This method is useful for embedding icons in contexts where direct SVG or CSS classes might not be suitable. ```html  ``` -------------------------------- ### Embed SVG Icons Source: https://context7.com/twbs/icons/llms.txt Inline SVG elements allow for full control over styling and accessibility. Use fill="currentColor" to enable color inheritance. ```html ``` -------------------------------- ### Use SVG Icons in CSS Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Embed SVG icons directly into CSS using data URIs. Ensure hex color values are escaped (e.g., # to %23) and include the xmlns attribute. ```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; } ``` -------------------------------- ### Embed SVG Icon Directly Source: https://github.com/twbs/icons/blob/main/docs/content/_index.md Embed SVG icons directly into your HTML. This method allows for easy manipulation of icon size and color using CSS properties like `width`, `height`, and `fill`. ```html ``` -------------------------------- ### JavaScript Unicode Escape for Icon Source: https://github.com/twbs/icons/blob/main/docs/layouts/icons/single.html Embed an icon in JavaScript strings using its Unicode escape sequence. This is helpful for dynamically generating HTML content or using icons within JavaScript logic. ```javascript \uEA3A ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.