Skip to content

Bundle Bootstrap Icons (Sass + web fonts) - #303

Closed
pardeyke wants to merge 1 commit into
twbs:mainfrom
pardeyke:add-bootstrap-icons
Closed

Bundle Bootstrap Icons (Sass + web fonts)#303
pardeyke wants to merge 1 commit into
twbs:mainfrom
pardeyke:add-bootstrap-icons

Conversation

@pardeyke

@pardeyke pardeyke commented Aug 9, 2026

Copy link
Copy Markdown

This adds Bootstrap Icons (currently v1.13.1) to the gem as opt-in assets, so apps can serve the icon font through their own asset pipeline instead of a render-blocking, cross-origin CDN stylesheet (@import "https://cdn.jsdelivr.net/npm/bootstrap-icons@.../bootstrap-icons.min.css").

I know #276 was closed as out of scope — I'd like to make a case for reconsidering:

  • It's fully opt-in. Nothing is added to compiled output unless the app explicitly does @import "bootstrap-icons". Apps that don't import it are byte-for-byte unaffected.
  • Precedent. bootstrap-sass shipped the Glyphicons font with the same wiring, and this gem already bundles popper.js (via the popper_js dependency) — also an independent library, bundled because Bootstrap is designed to be used with it.
  • Maintenance stays automated. A new rake update_icons[version] task updates the Sass and fonts from the bootstrap-icons npm package (via jsDelivr) and records BOOTSTRAP_ICONS_VERSION, matching the gem's existing updater philosophy. rake update was adjusted to only remove Bootstrap-managed assets so the icons survive Bootstrap updates.
  • The CDN alternative is a real papercut in Rails. The CSS @import blocks rendering on a third-party origin, and self-hosting requires manually vendoring fonts plus fixing up font paths — exactly the kind of glue this gem exists to provide.

What's included

  • assets/stylesheets/_bootstrap-icons.scss — the upstream Sass file, verbatim (auto-updated by rake update_icons)
  • assets/stylesheets/_bootstrap-icons-sprockets.scss — thin wrapper that resolves the fonts with font-url for Sprockets:
    @import "bootstrap-icons-sprockets";
  • assets/stylesheets/_bootstrap-icons-propshaft.scss — thin wrapper for Propshaft (e.g. dartsass-rails) that emits root-relative font URLs Propshaft rewrites to digested paths. It drops upstream's ?hash cache-buster: Propshaft already fingerprints the filename, and the query string makes the CSS font URL differ from preload_link_tag's URL, so browsers download the font twice (defeated preload):
    @import "bootstrap-icons-propshaft";
  • assets/fonts/bootstrap-icons.woff2 / .woff — registered with the Rails engine, Sprockets, and Hanami asset paths
  • README section covering Sprockets, Propshaft, and manual setups
  • The dummy Rails app imports bootstrap-icons-sprockets, so the suite covers compilation and precompilation; test/icons_test.rb additionally asserts the Propshaft wrapper compiles to query-free root-relative URLs

Verification

Test suite passes; assets:precompile in the dummy app emits the digested fonts automatically (Sprockets links them through font-url), and the compiled CSS contains:

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url(/assets/bootstrap-icons-6c757103...ea61.woff2) format("woff2"), url(/assets/bootstrap-icons-f55513b7...4a15.woff) format("woff");
}

🤖 Generated with Claude Code

Adds Bootstrap Icons v1.13.1 as opt-in assets so icons can be served
through the app's own asset pipeline instead of a CDN:

* assets/stylesheets/_bootstrap-icons.scss: upstream Sass, verbatim
* assets/stylesheets/_bootstrap-icons-sprockets.scss: wrapper that
  resolves the fonts via font-url for Sprockets
* assets/stylesheets/_bootstrap-icons-propshaft.scss: wrapper for
  Propshaft that emits root-relative font URLs without upstream's
  ?hash query string (Propshaft fingerprints the filename itself, and
  the query would defeat preload_link_tag's exact-URL preload match)
* assets/fonts: woff/woff2 icon fonts, registered with Rails,
  Sprockets, and Hanami asset paths
* rake update_icons[version]: updates the icon assets from the
  bootstrap-icons npm package and stores BOOTSTRAP_ICONS_VERSION
* rake update now only removes Bootstrap-managed assets so the icon
  files survive Bootstrap updates

Nothing is included in compiled output unless explicitly imported.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@pardeyke
pardeyke force-pushed the add-bootstrap-icons branch from 5ce3505 to 2fc72b0 Compare August 9, 2026 20:48
@glebm

glebm commented Aug 10, 2026

Copy link
Copy Markdown
Member

This is still very much out of scope. bootstrap-icons is a separate library from Bootstrap itself, so if you want to wrap it in a rubygem it should be a separate gem.

This is different from popover, which is a hard dependency of Bootstrap (even then, we do not vendor popover but instead add a dependency on the corresponding popover gem).

@glebm glebm closed this Aug 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants