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

Comments

aleix created an issue. See original summary.

aleix’s picture

Title: incos using icon api » Add subtheme icons using icon api
doxigo’s picture

Status: Active » Fixed

Hey Aleix 👋

Sorry it took me a while to get to this, but this is done now and documented here: https://docs.trydrupal.com/radix/understanding-radix/icons

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • doxigo committed 962a85ec on 6.0.x
    feat: #3532816 Add subtheme icons using icon api
    
    By: aleix
    By: doxigo
    
aleix’s picture

Great! thank's @doxigo !

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.