Add subtheme icons using icon api

Created on 27 June 2025, 5 days ago

Problem/Motivation

Usually an icon package is needed, allow using it via icon-api would be great: https://www.drupal.org/docs/develop/drupal-apis/icon-api#s-how-to-add-an...

After testing it, it is not difficult:
- adding this SUBTHEME.icons.yml to subtheme:

bootstrap_icons:
  label: "Bootstrap"
  description: "Bootstrap icons from SVG files."
  links:
    - https://icons.getbootstrap.com/#usage
  license:
    name: MIT
    url: https://github.com/twbs/icons/blob/main/LICENSE
    gpl-compatible: true
  extractor: svg
  config:
    sources:
      - /libraries/bootstrap-icons/icons/{icon_id}.svg
  settings:
    size:
      title: "Size"
      description: "You need to specify the size unit (px, em or other). Default value is 32px."
      type: "string"
      default: "32px"
    color:
      title: "Color"
      type: "string"
    alt:
      title: "Alt text"
      description: "Accessibility alternative text, leave empty for decorative icon."
      type: "string"
  template: >-
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="bi bi-{{ icon_id }}"
      style="width:{{ size|default('32px') }};height:{{ size|default('32px') }};"
      fill="{{ color|default('currentColor') }}"
      viewBox="0 0 16 16"
      {% if alt is empty %}
        aria-hidden="true"
      {% else %}
        aria-label="{{ alt }}"
      {% endif %}
    >
      {{ content }}
    </svg>

installing icons in subtheme with:

yarn add bootstrap-icons

and adding the copy step to webpack.mix.js

mix.copyDirectoryWatched('node_modules/bootstrap-icons/icons/*', 'build/assets/icons/bootstrap-icons');

Allows to use the api in render arrays like:

$build['icon'] = [
  '#type' => 'icon',
  '#pack_id' => 'bootstrap_icons,
  '#icon_id' => 'house-fill',
  '#settings' => [
    'size' => 64,
  ],
];

or in twig:

{{ icon('bootstrap_icons', 'house-fill', {size: 64}) }}

also it will be usable with https://www.drupal.org/project/ui_icons

Feature request
Status

Active

Version

6.0

Component

Code

Created by

🇪🇸Spain aleix

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024