20-icon-use-case-custom-svg.twig

{% set schema = bolt.data.components['@bolt-elements-icon'].schema %}

{% set description %}
  Custom SVG can be used instead to render an icon that is not available in the design system.
{% endset %}

{% set notes %}
  <bolt-ol>
    <bolt-li>When creating a custom SVG, start with a 32px by 32px artboard in the design tool (Adobe Illustrator, Sketch, etc.).</bolt-li>
    <bolt-li>Make sure all layers have been converted to objects, meaning there is no stroke, only shapes with color fill.</bolt-li>
    <bolt-li>Combine all objects if they visually connect (i.e. create one big shape).</bolt-li>
    <bolt-li>Set the object&rsquo;s fill color to #151619.</bolt-li>
    <bolt-li>Set the widest side to 32px and center the icon within the artboard.</bolt-li>
    <bolt-li>Save the SVG and then use <a href="https://imageoptim.com/mac">imgoptim</a> or another tool to minify it.</bolt-li>
    <bolt-li>
    Lastly:
    <bolt-ol>
      <bolt-li>If you choose a Twig usage:
        <bolt-ul>
          <bolt-li>Add the element relevant attributes <code>{% verbatim %}{{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true"{% endverbatim %}</code> to the <code>&lt;svg&gt;</code> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the <code>custom_icon_path</code> prop.</bolt-li>
        </bolt-ul>
      </bolt-li>
      <bolt-li>If you choose a HTML usage:
        <bolt-ul>
          <bolt-li>Add the element class <code>class="e-bolt-icon"</code> and relevant modifier classes, add the attribute <code>aria-hidden="true"</code> and the three key attributes (if they weren't provided by default): <code>enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" </code> to the <code>&lt;svg&gt;</code> HTML element. Then you can display the icon using the modified <code>&lt;svg&gt;</code> markup.</bolt-li>
        </bolt-ul>
      </bolt-li>
    </bolt-ol>
{% endset %}

{% set demo %}
<svg class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" aria-hidden="true" viewBox="0 0 496 512">
  <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z" />
</svg>
{% endset %}

{% set twig_markup %}
{% verbatim %}
{% include '@bolt-elements-icon/icon.twig' with {
  custom_icon_path: 'full/path/to/custom-icon-file.twig',
} only %}
{% endverbatim %}
{% endset %}

{% set html_markup %}
{% verbatim %}
<svg enable-background="new 0 0 32 32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" aria-hidden="true">
  <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z" />
</svg>
{% endverbatim %}
{% endset %}

{% include '@utils/pattern-doc-page.twig' with {
  title: 'Icon Use Case: Custom SVG',
  description: description,
  notes: notes,
  demo: demo,
  twig_markup: twig_markup,
  html_markup: html_markup,
} only %}