- Issue created by @aleix
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 →
Active
6.0
Code