Problem/Motivation

bs_base has only an icon font. Themes that follow a current design need line icons with their own stroke width and colour, which a font cannot do, so child themes build their own SVG solutions. Drupal 11.1's Icon API is SVG only, but bs_base 2.x still supports Drupal 10.

Proposed resolution

Add SVG icons as an option, off by default. With $bs-svg-icon-use: false (new, next to $bs-icon-use) nothing changes for existing themes, and the font stays the default.

  • Icons as files in images/icons/<name>.svg of each theme.
  • Inline: bs-icon.html.twig, which includes the file from the active theme, with size, stroke and label.
  • CSS: a bs-svg-icon($name, $size) mixin that draws the file as a mask on a pseudo element.
  • A gulp task that copies parent theme icons to the child theme, and alias classes so stored fa-* classes keep working.

The details are in docs/plans/svg-icons.md in the MR. Removing the font and moving to core's Icon API is for 3.x.

Remaining tasks

  • Implement, with a compiled CSS diff showing no change when the option is off.
  • README.

API changes

New: $bs-svg-icon-use, bs-svg-icon(), bs-icon.html.twig, gulp task icons. No existing API changes.

Issue fork bs_base-3634680

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented
Issue summary: View changes

pivica opened merge request !44

pivica’s picture

pivica commented
Status: Active » Needs review

First MR ready.

pivica’s picture

pivica commented

The MR now switches the existing icon mixins to SVG instead of adding a second API next to them. bsb-icon() is the one call; bs-icon(), bs-create-icon() and bs-icon-create-content() call it and are deprecated until 3.x, which removes the icon font. The SVG names of this issue take the bsb-icon prefix ($bsb-icon-svg, bsb-icon.html.twig, .bsb-icon). With the option off, all 43 Sass files compile to the same CSS as before. node --test tests/: 29 tests. Issue summary updated.