@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/field-separator.liquid

@@ -0,0 +1,68 @@
+{% doc %}
+  Baseline FieldSeparator as a snippet (spec: components/field/spec.md). A rule between groups of fields, with
+  an optional caption sitting in a gap in the middle of it — "or", "and then", a step name.
+
+  Mirrors registry/src/ui/field/field.tsx's FieldSeparator. There is no standalone Separator snippet on
+  Shopify: `components/separator/spec.md` marks that platform not-planned, because sections draw their own
+  rules. This is the one place Baseline needs one, so the rule lives here.
+
+  @param {string} [label] - caption shown in a gap in the rule; omit for a plain rule
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'field-separator' %}
+  {% render 'field-separator', label: 'or' %}
+{% enddoc %}
+
+{%- liquid
+  assign classes = 'bl-field-separator'
+  if label != blank
+    assign classes = classes | append: ' bl-field-separator--labelled'
+  endif
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<div class="{{ classes }}" data-slot="field-separator" role="separator" aria-orientation="horizontal">
+  <span class="bl-field-separator__rule" aria-hidden="true"></span>
+  {%- if label != blank -%}
+    <span class="bl-field-separator__content" data-slot="field-separator-content">{{ label }}</span>
+  {%- endif -%}
+</div>
+
+{% stylesheet %}
+  /* The rule is a filled hairline rather than a border, which is how Figma draws it too: the Field Separator
+     rectangle binds its height to separator/thickness and its fill to color/border.
+
+     The caption sits ON the rule with a background-coloured gap around it, rather than the rule being split in
+     two — one element, and the gap follows the caption's width without any measuring. */
+  .bl-field-separator {
+    position: relative;
+    display: flex;
+    height: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    margin-block: calc(var(--bl-field-gap) * -1);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-field-description-font-size);
+    line-height: var(--bl-field-description-line-height);
+  }
+
+  .bl-field-separator__rule {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    height: var(--bl-separator-thickness);
+    background-color: var(--border);
+  }
+
+  .bl-field-separator__content {
+    position: relative;
+    display: block;
+    width: fit-content;
+    margin-inline: auto;
+    padding-inline: var(--bl-field-separator-padding-x);
+    background-color: var(--background);
+    color: var(--muted-foreground);
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/field.liquid

@@ -0,0 +1,187 @@
+{% doc %}
+  Baseline Field as a snippet (spec: components/field/spec.md). Field gives a control its label, description
+  and error. It does not render the control: pass one in, which keeps Input, Select and Textarea independent
+  exactly as the Figma `Control` swap does.
+
+  @param {string} control - the control's markup, captured from another snippet (required)
+  @param {string} [label] - label text
+  @param {string} [id] - the control's id, so the label points at it with `for`
+  @param {string} [description] - helper text
+  @param {string} [error] - validation message; also marks the field invalid
+  @param {string} [orientation] - vertical (default) | horizontal, control beside the label
+  @param {boolean} [card] - the option card (React's FieldLabel wrapping a Field): the whole field becomes a bordered,
+    selectable card that is itself the label, with the checkbox, radio or switch at its end; selected tints it
+  @param {string} [control_position] - start | end: where a horizontal field's control sits (default start, or end for a card)
+  @param {string} [class] - extra classes
+
+  @example
+  {%- capture control -%}
+    {% render 'input', type: 'email', name: 'contact[email]', id: 'contact-email', required: true %}
+  {%- endcapture -%}
+  {% render 'field', label: 'Email', id: 'contact-email', description: 'We only use this to reply.', control: control %}
+{% enddoc %}
+
+{%- liquid
+  assign o = orientation | default: 'vertical'
+  if card
+    assign o = 'horizontal'
+  endif
+  assign control_first = true
+  if card
+    assign control_first = false
+  endif
+  case control_position
+    when 'start'
+      assign control_first = true
+    when 'end'
+      assign control_first = false
+  endcase
+  assign classes = 'bl-field bl-field--' | append: o
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+{%- if card -%}
+  <label class="bl-field-card" data-slot="field-label"{% if id != blank %} for="{{ id }}"{% endif %}>
+{%- endif -%}
+<div
+  class="{{ classes }}"
+  role="group"
+  data-slot="field"
+  data-orientation="{{ o }}"
+  {%- if error != blank %} data-invalid="true"{% endif -%}
+>
+  {%- if o == 'horizontal' -%}
+    {%- if control_first -%}{{ control }}{%- endif -%}
+    <div class="bl-field__content" data-slot="field-content">
+      {%- if label != blank and card -%}
+        <span class="bl-field__label" data-slot="field-label">{{ label }}</span>
+      {%- elsif label != blank -%}
+        <label class="bl-field__label" data-slot="field-label"{% if id != blank %} for="{{ id }}"{% endif %}>{{ label }}</label>
+      {%- endif -%}
+      {%- if description != blank -%}
+        <p class="bl-field__description" data-slot="field-description">{{ description }}</p>
+      {%- endif -%}
+      {%- if error != blank -%}
+        <div class="bl-field__error" role="alert" data-slot="field-error">{{ error }}</div>
+      {%- endif -%}
+    </div>
+    {%- unless control_first -%}{{ control }}{%- endunless -%}
+  {%- else -%}
+    {%- if label != blank -%}
+      <label class="bl-field__label" data-slot="field-label"{% if id != blank %} for="{{ id }}"{% endif %}>{{ label }}</label>
+    {%- endif -%}
+    {{ control }}
+    {%- if description != blank -%}
+      <p class="bl-field__description" data-slot="field-description">{{ description }}</p>
+    {%- endif -%}
+    {%- if error != blank -%}
+      <div class="bl-field__error" role="alert" data-slot="field-error">{{ error }}</div>
+    {%- endif -%}
+  {%- endif -%}
+</div>
+{%- if card -%}
+  </label>
+{%- endif -%}
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/field/field.tsx. Type and spacing come from the field/* and label/* component
+     tokens in baseline-tokens.liquid (ADR-0017); colours come from the scheme class. */
+  .bl-field {
+    display: flex;
+    width: 100%;
+    gap: var(--bl-field-gap);
+  }
+  .bl-field--vertical {
+    flex-direction: column;
+  }
+  .bl-field--vertical > * {
+    width: 100%;
+  }
+  /* horizontal: only the label side grows, so a checkbox or switch keeps its natural width */
+  .bl-field--horizontal {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .bl-field__content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--bl-field-content-gap);
+  }
+
+  .bl-field__label {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    gap: var(--bl-label-gap);
+    color: var(--foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-label-font-size);
+    line-height: var(--bl-label-line-height);
+    font-weight: var(--bl-label-font-weight);
+    user-select: none;
+  }
+  .bl-field__description {
+    margin: 0;
+    text-align: left;
+    color: var(--muted-foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-field-description-font-size);
+    line-height: var(--bl-field-description-line-height);
+    font-weight: var(--bl-field-description-font-weight);
+  }
+  .bl-field__error {
+    color: var(--destructive);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-field-error-font-size);
+    line-height: var(--bl-field-error-line-height);
+    font-weight: var(--bl-field-error-font-weight);
+  }
+  /* an invalid field reddens its whole group, which is what data-invalid does in code */
+  .bl-field[data-invalid='true'] .bl-field__label {
+    color: var(--destructive);
+  }
+
+  /* The option card (React: FieldLabel wrapping a Field, the field/option-card/* tokens). The selected tint is
+     field/option-card/{background,border}-selected, primary at 5 % / 30 %, emitted as color-mix(). */
+  .bl-field-card {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    border: var(--bl-field-option-card-border-width) solid var(--border);
+    border-radius: var(--bl-field-option-card-radius);
+    cursor: pointer;
+    transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+  }
+  .bl-field-card > .bl-field {
+    padding: var(--bl-field-option-card-padding);
+    column-gap: var(--bl-field-option-card-column-gap);
+  }
+  .bl-field-card:has(:checked) {
+    border-color: var(--bl-field-option-card-border-selected);
+    background-color: var(--bl-field-option-card-background-selected);
+  }
+  .bl-field-card:not(:has(:disabled)):hover {
+    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+  }
+  .bl-field-card:has(:checked):not(:has(:disabled)):hover {
+    background-color: var(--bl-field-option-card-background-selected);
+  }
+  .bl-field-card:has(:focus-visible) {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  }
+  .bl-field-card:has(:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* stacks of fields; the group gap is the same token FieldGroup uses */
+  .bl-field-group {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--bl-field-group-gap);
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/icon.liquid

@@ -0,0 +1,101 @@
+{% comment %} Generated by tokens/icons.mjs (baseline-tokens icons) from tokens/icons/vocabulary.json (active set: material-symbols). Do not edit. {% endcomment %}
+{% doc %}
+  Baseline system icon (PLAN §4.9). Renders the active set's glyph inline, currentColor.
+  @param {string} name - Baseline icon name (see tokens/icons/vocabulary.json)
+  @param {string} [class] - extra classes
+  @example
+  {% render 'icon', name: 'chevron-down' %}
+{% enddoc %}
+{%- case name -%}
+  {%- when 'arrow-down' -%}<svg class="bl-icon bl-icon--arrow-down {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M11 16.175V5q0-.425.288-.712T12 4t.713.288T13 5v11.175l4.9-4.9q.3-.3.7-.288t.7.313q.275.3.287.7t-.287.7l-6.6 6.6q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-6.6-6.6q-.275-.275-.275-.687T4.7 11.3q.3-.3.713-.3t.712.3z"/></svg>
+  {%- when 'arrow-left' -%}<svg class="bl-icon bl-icon--arrow-left {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z"/></svg>
+  {%- when 'arrow-right' -%}<svg class="bl-icon bl-icon--arrow-right {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M16.175 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.175l-4.9-4.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.288t.7.288l6.6 6.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-6.6 6.6q-.275.275-.687.275T11.3 19.3q-.3-.3-.3-.712t.3-.713z"/></svg>
+  {%- when 'arrow-up' -%}<svg class="bl-icon bl-icon--arrow-up {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m11 7.825l-4.9 4.9q-.3.3-.7.288t-.7-.313q-.275-.3-.288-.7t.288-.7l6.6-6.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l6.6 6.6q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3L13 7.825V19q0 .425-.288.713T12 20t-.712-.288T11 19z"/></svg>
+  {%- when 'arrow-up-down' -%}<svg class="bl-icon bl-icon--arrow-up-down {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8.288 12.713Q8 12.425 8 12V5.825L6.125 7.7q-.275.275-.687.275T4.725 7.7q-.3-.3-.3-.712t.3-.713L8.3 2.7q.15-.15.325-.213T9 2.425t.375.062t.325.213l3.6 3.6q.3.3.287.7t-.312.7q-.3.275-.7.288t-.7-.288L10 5.825V12q0 .425-.288.713T9 13t-.712-.288m6.337 8.8q-.175-.062-.325-.212l-3.6-3.6q-.3-.3-.287-.7t.312-.7q.3-.275.7-.288t.7.288L14 18.175V12q0-.425.288-.712T15 11t.713.288T16 12v6.175l1.875-1.875q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L15.7 21.3q-.15.15-.325.213t-.375.062t-.375-.062"/></svg>
+  {%- when 'calendar' -%}<svg class="bl-icon bl-icon--calendar {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5z"/></svg>
+  {%- when 'cart' -%}<svg class="bl-icon bl-icon--cart {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M5.588 21.413Q5 20.825 5 20t.588-1.412T7 18t1.413.588T9 20t-.587 1.413T7 22t-1.412-.587m10 0Q15 20.825 15 20t.588-1.412T17 18t1.413.588T19 20t-.587 1.413T17 22t-1.412-.587M5.2 4h14.75q.575 0 .875.513t.025 1.037l-3.55 6.4q-.275.5-.737.775T15.55 13H8.1L7 15h11q.425 0 .713.288T19 16t-.288.713T18 17H7q-1.125 0-1.7-.987t-.05-1.963L6.6 11.6L3 4H2q-.425 0-.712-.288T1 3t.288-.712T2 2h1.625q.275 0 .525.15t.375.425z"/></svg>
+  {%- when 'check' -%}<svg class="bl-icon bl-icon--check {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"/></svg>
+  {%- when 'chevron-down' -%}<svg class="bl-icon bl-icon--chevron-down {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M11.625 14.913q-.175-.063-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062t-.375-.062"/></svg>
+  {%- when 'chevron-left' -%}<svg class="bl-icon bl-icon--chevron-left {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z"/></svg>
+  {%- when 'chevron-right' -%}<svg class="bl-icon bl-icon--chevron-right {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"/></svg>
+  {%- when 'chevron-up' -%}<svg class="bl-icon bl-icon--chevron-up {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m12 10.8l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>
+  {%- when 'chevrons-left' -%}<svg class="bl-icon bl-icon--chevrons-left {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m7.825 12l3.875 3.9q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.213-.325T5.426 12t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.287t.712.287q.275.275.275.7t-.275.7zm6.6 0l3.875 3.9q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.213-.325T12.026 12t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.287t.712.287q.275.275.275.7t-.275.7z"/></svg>
+  {%- when 'chevrons-right' -%}<svg class="bl-icon bl-icon--chevrons-right {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M9.575 12L5.7 8.1q-.275-.275-.288-.687T5.7 6.7q.275-.275.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.687.288T5.7 17.3q-.275-.275-.275-.7t.275-.7zm6.6 0L12.3 8.1q-.275-.275-.288-.687T12.3 6.7q.275-.275.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.687.288T12.3 17.3q-.275-.275-.275-.7t.275-.7z"/></svg>
+  {%- when 'chevrons-up-down' -%}<svg class="bl-icon bl-icon--chevrons-up-down {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m12 18.1l2.325-2.325q.3-.3.725-.3t.725.3t.3.725t-.3.725L12.7 20.3q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-3.075-3.075q-.3-.3-.3-.725t.3-.725t.725-.3t.725.3zM12 6L9.675 8.325q-.3.3-.725.3t-.725-.3t-.3-.725t.3-.725L11.3 3.8q.15-.15.325-.213T12 3.526t.375.063t.325.212l3.075 3.075q.3.3.3.725t-.3.725t-.725.3t-.725-.3z"/></svg>
+  {%- when 'circle' -%}<svg class="bl-icon bl-icon--circle {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
+  {%- when 'clock' -%}<svg class="bl-icon bl-icon--clock {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M13 11.6V8q0-.425-.288-.712T12 7t-.712.288T11 8v3.975q0 .2.075.388t.225.337l3.3 3.3q.275.275.7.275T16 16t.275-.7t-.275-.7zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
+  {%- when 'close' -%}<svg class="bl-icon bl-icon--close {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>
+  {%- when 'close-circle' -%}<svg class="bl-icon bl-icon--close-circle {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7t.7.275t.7-.275zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
+  {%- when 'copy' -%}<svg class="bl-icon bl-icon--copy {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V7q0-.425.288-.712T4 6t.713.288T5 7v13h10q.425 0 .713.288T16 21t-.288.713T15 22z"/></svg>
+  {%- when 'download' -%}<svg class="bl-icon bl-icon--download {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M11.625 15.513q-.175-.063-.325-.213l-3.6-3.6q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L11 12.15V5q0-.425.288-.712T12 4t.713.288T13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7t-.288.7l-3.6 3.6q-.15.15-.325.213t-.375.062t-.375-.062M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20z"/></svg>
+  {%- when 'edit' -%}<svg class="bl-icon bl-icon--edit {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M4 21q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z"/></svg>
+  {%- when 'error' -%}<svg class="bl-icon bl-icon--error {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.713 16.713Q13 16.425 13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17t.713-.288m0-4Q13 12.425 13 12V8q0-.425-.288-.712T12 7t-.712.288T11 8v4q0 .425.288.713T12 13t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
+  {%- when 'external-link' -%}<svg class="bl-icon bl-icon--external-link {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h14v-6q0-.425.288-.712T20 12t.713.288T21 13v6q0 .825-.587 1.413T19 21zM19 6.4L10.4 15q-.275.275-.7.275T9 15t-.275-.7t.275-.7L17.6 5H15q-.425 0-.712-.288T14 4t.288-.712T15 3h5q.425 0 .713.288T21 4v5q0 .425-.288.713T20 10t-.712-.288T19 9z"/></svg>
+  {%- when 'eye' -%}<svg class="bl-icon bl-icon--eye {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M15.188 14.688Q16.5 13.375 16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16t3.188-1.312m-5.1-1.276Q9.3 12.625 9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2t-1.912-.787m-4.2 3.787q-2.763-1.8-4.363-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19t-6.113-1.8"/></svg>
+  {%- when 'eye-off' -%}<svg class="bl-icon bl-icon--eye-off {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m19.1 21.9l-3.5-3.45q-.875.275-1.775.413T12 19q-3.35 0-6.125-1.8t-4.35-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q.55-.975 1.175-1.9T4.15 7L2.075 4.9Q1.8 4.625 1.8 4.213t.3-.713q.275-.275.7-.275t.7.275l17 17q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275M12 16q.275 0 .525-.025t.5-.1l-5.4-5.4q-.075.25-.1.5T7.5 11.5q0 1.875 1.313 3.188T12 16m0-12q3.35 0 6.138 1.813t4.362 4.762q.125.2.188.438t.062.487t-.05.488t-.175.437q-.475.925-1.062 1.75t-1.313 1.55q-.35.35-.825.325t-.825-.375l-2-2q-.175-.175-.225-.413t.025-.487q.1-.325.15-.625t.05-.65q0-1.875-1.312-3.187T12 7q-.35 0-.65.05t-.625.15q-.25.075-.5.025T9.8 7l-.825-.825q-.475-.475-.312-1.1t.787-.8q.625-.125 1.263-.2T12 4m1.975 5.65q.275.325.462.713t.238.812q.025.2-.15.275t-.325-.075l-2.05-2.05Q12 9.175 12.088 9t.287-.175q.475.05.875.263t.725.562"/></svg>
+  {%- when 'file' -%}<svg class="bl-icon bl-icon--file {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M9 18h6q.425 0 .713-.288T16 17t-.288-.712T15 16H9q-.425 0-.712.288T8 17t.288.713T9 18m0-4h6q.425 0 .713-.288T16 13t-.288-.712T15 12H9q-.425 0-.712.288T8 13t.288.713T9 14m-3 8q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762V20q0 .825-.587 1.413T18 22zm7-14q0 .425.288.713T14 9h4l-5-5z"/></svg>
+  {%- when 'filter' -%}<svg class="bl-icon bl-icon--filter {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M11 18q-.425 0-.712-.288T10 17t.288-.712T11 16h2q.425 0 .713.288T14 17t-.288.713T13 18zm-4-5q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13zM4 8q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z"/></svg>
+  {%- when 'grip-vertical' -%}<svg class="bl-icon bl-icon--grip-vertical {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M9 20q-.825 0-1.412-.587T7 18t.588-1.412T9 16t1.413.588T11 18t-.587 1.413T9 20m6 0q-.825 0-1.412-.587T13 18t.588-1.412T15 16t1.413.588T17 18t-.587 1.413T15 20m-6-6q-.825 0-1.412-.587T7 12t.588-1.412T9 10t1.413.588T11 12t-.587 1.413T9 14m6 0q-.825 0-1.412-.587T13 12t.588-1.412T15 10t1.413.588T17 12t-.587 1.413T15 14M9 8q-.825 0-1.412-.587T7 6t.588-1.412T9 4t1.413.588T11 6t-.587 1.413T9 8m6 0q-.825 0-1.412-.587T13 6t.588-1.412T15 4t1.413.588T17 6t-.587 1.413T15 8"/></svg>
+  {%- when 'home' -%}<svg class="bl-icon bl-icon--home {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M4 19v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-3q-.425 0-.712-.288T14 20v-5q0-.425-.288-.712T13 14h-2q-.425 0-.712.288T10 15v5q0 .425-.288.713T9 21H6q-.825 0-1.412-.587T4 19"/></svg>
+  {%- when 'image' -%}<svg class="bl-icon bl-icon--image {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm2-4h10q.3 0 .45-.275t-.05-.525l-2.75-3.675q-.15-.2-.4-.2t-.4.2L11.25 16L9.4 13.525q-.15-.2-.4-.2t-.4.2l-2 2.675q-.2.25-.05.525T7 17"/></svg>
+  {%- when 'info' -%}<svg class="bl-icon bl-icon--info {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.713 16.713Q13 16.425 13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17t.713-.288m0-8Q13 8.425 13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
+  {%- when 'link' -%}<svg class="bl-icon bl-icon--link {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M7 17q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h3q.425 0 .713.288T11 8t-.288.713T10 9H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h3q.425 0 .713.288T11 16t-.288.713T10 17zm2-4q-.425 0-.712-.288T8 12t.288-.712T9 11h6q.425 0 .713.288T16 12t-.288.713T15 13zm5 4q-.425 0-.712-.288T13 16t.288-.712T14 15h3q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-3q-.425 0-.712-.288T13 8t.288-.712T14 7h3q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"/></svg>
+  {%- when 'loader' -%}<svg class="bl-icon bl-icon--loader {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12 2q.425 0 .713.288T13 3t-.288.713T12 4Q8.675 4 6.337 6.338T4 12t2.338 5.663T12 20t5.663-2.337T20 12q0-.425.288-.712T21 11t.713.288T22 12q0 2.05-.788 3.875t-2.15 3.188t-3.175 2.15t-3.875.787t-3.887-.787"/></svg>
+  {%- when 'lock' -%}<svg class="bl-icon bl-icon--lock {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z"/></svg>
+  {%- when 'mail' -%}<svg class="bl-icon bl-icon--mail {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8.263-7.212q.137-.038.262-.113L19.6 8.25q.2-.125.3-.312t.1-.413q0-.5-.425-.75T18.7 6.8L12 11L5.3 6.8q-.45-.275-.875-.012T4 7.525q0 .25.1.438t.3.287l7.075 4.425q.125.075.263.113t.262.037t.263-.037"/></svg>
+  {%- when 'menu' -%}<svg class="bl-icon bl-icon--menu {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z"/></svg>
+  {%- when 'minus' -%}<svg class="bl-icon bl-icon--minus {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M6 13q-.425 0-.712-.288T5 12t.288-.712T6 11h12q.425 0 .713.288T19 12t-.288.713T18 13z"/></svg>
+  {%- when 'more-horizontal' -%}<svg class="bl-icon bl-icon--more-horizontal {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M6 14q-.825 0-1.412-.587T4 12t.588-1.412T6 10t1.413.588T8 12t-.587 1.413T6 14m6 0q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m6 0q-.825 0-1.412-.587T16 12t.588-1.412T18 10t1.413.588T20 12t-.587 1.413T18 14"/></svg>
+  {%- when 'more-vertical' -%}<svg class="bl-icon bl-icon--more-vertical {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 20q-.825 0-1.412-.587T10 18t.588-1.412T12 16t1.413.588T14 18t-.587 1.413T12 20m0-6q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m0-6q-.825 0-1.412-.587T10 6t.588-1.412T12 4t1.413.588T14 6t-.587 1.413T12 8"/></svg>
+  {%- when 'pause' -%}<svg class="bl-icon bl-icon--pause {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5t1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5t1.413.588T10 7v10q0 .825-.587 1.413T8 19"/></svg>
+  {%- when 'phone' -%}<svg class="bl-icon bl-icon--phone {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M19.95 21q-3.125 0-6.175-1.362t-5.55-3.863t-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.4 8.45L6.975 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 17l2.35-2.35q.225-.225.588-.337t.712-.063l3.45.7q.35.1.575.363T21 15.9v4.05q0 .45-.3.75t-.75.3"/></svg>
+  {%- when 'play' -%}<svg class="bl-icon bl-icon--play {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"/></svg>
+  {%- when 'plus' -%}<svg class="bl-icon bl-icon--plus {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M11 13H6q-.425 0-.712-.288T5 12t.288-.712T6 11h5V6q0-.425.288-.712T12 5t.713.288T13 6v5h5q.425 0 .713.288T19 12t-.288.713T18 13h-5v5q0 .425-.288.713T12 19t-.712-.288T11 18z"/></svg>
+  {%- when 'refresh' -%}<svg class="bl-icon bl-icon--refresh {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 20q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4q1.725 0 3.3.712T18 6.75V5q0-.425.288-.712T19 4t.713.288T20 5v5q0 .425-.288.713T19 11h-5q-.425 0-.712-.288T13 10t.288-.712T14 9h3.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12t1.75 4.25T12 18q1.7 0 3.113-.862t2.187-2.313q.2-.35.563-.487t.737-.013q.4.125.575.525t-.025.75q-1.025 2-2.925 3.2T12 20"/></svg>
+  {%- when 'search' -%}<svg class="bl-icon bl-icon--search {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"/></svg>
+  {%- when 'settings' -%}<svg class="bl-icon bl-icon--settings {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.225-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5"/></svg>
+  {%- when 'share' -%}<svg class="bl-icon bl-icon--share {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M17 22q-1.25 0-2.125-.875T14 19q0-.15.075-.7L7.05 14.2q-.4.375-.925.588T5 15q-1.25 0-2.125-.875T2 12t.875-2.125T5 9q.6 0 1.125.213t.925.587l7.025-4.1q-.05-.175-.062-.337T14 5q0-1.25.875-2.125T17 2t2.125.875T20 5t-.875 2.125T17 8q-.6 0-1.125-.213T14.95 7.2l-7.025 4.1q.05.175.063.338T8 12t-.012.363t-.063.337l7.025 4.1q.4-.375.925-.587T17 16q1.25 0 2.125.875T20 19t-.875 2.125T17 22"/></svg>
+  {%- when 'sidebar' -%}<svg class="bl-icon bl-icon--sidebar {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M19.5 8q-.625 0-1.062-.437T18 6.5v-1q0-.625.438-1.062T19.5 4h1q.625 0 1.063.438T22 5.5v1q0 .625-.437 1.063T20.5 8zm0 6q-.625 0-1.062-.437T18 12.5v-1q0-.625.438-1.062T19.5 10h1q.625 0 1.063.438T22 11.5v1q0 .625-.437 1.063T20.5 14zM4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h10q.825 0 1.413.588T16 6v12q0 .825-.587 1.413T14 20zm15.5 0q-.625 0-1.062-.437T18 18.5v-1q0-.625.438-1.062T19.5 16h1q.625 0 1.063.438T22 17.5v1q0 .625-.437 1.063T20.5 20z"/></svg>
+  {%- when 'star' -%}<svg class="bl-icon bl-icon--star {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m12 17.275l-4.15 2.5q-.275.175-.575.15t-.525-.2t-.35-.437t-.05-.588l1.1-4.725L3.775 10.8q-.25-.225-.312-.513t.037-.562t.3-.45t.55-.225l4.85-.425l1.875-4.45q.125-.3.388-.45t.537-.15t.537.15t.388.45l1.875 4.45l4.85.425q.35.05.55.225t.3.45t.038.563t-.313.512l-3.675 3.175l1.1 4.725q.075.325-.05.588t-.35.437t-.525.2t-.575-.15z"/></svg>
+  {%- when 'success' -%}<svg class="bl-icon bl-icon--success {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m10.6 13.8l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
+  {%- when 'trash' -%}<svg class="bl-icon bl-icon--trash {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zm3.713-4.288Q11 16.426 11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17t.713-.288m4 0Q15 16.426 15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17t.713-.288"/></svg>
+  {%- when 'upload' -%}<svg class="bl-icon bl-icon--upload {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20zm5-12.15L9.125 9.725q-.3.3-.712.288T7.7 9.7q-.275-.3-.288-.7t.288-.7l3.6-3.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l3.6 3.6q.3.3.288.7t-.288.7q-.3.3-.712.313t-.713-.288L13 7.85V15q0 .425-.288.713T12 16t-.712-.288T11 15z"/></svg>
+  {%- when 'user' -%}<svg class="bl-icon bl-icon--user {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 18v-.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2v.8q0 .825-.587 1.413T18 20H6q-.825 0-1.412-.587T4 18"/></svg>
+  {%- when 'warning' -%}<svg class="bl-icon bl-icon--warning {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zm9.988-3.287Q13 17.425 13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18t.713-.288m0-3Q13 14.425 13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15t.713-.288"/></svg>
+  {%- when 'brand-amazon' -%}<svg class="bl-icon bl-icon--brand-amazon {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M.045 18.02q.107-.174.348-.022q5.455 3.165 11.87 3.166q4.278-.001 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13c.226-.088.39-.046.525.13c.12.174.09.336-.12.48c-.256.19-.6.41-1.006.654q-1.867 1.113-4.185 1.726a17.6 17.6 0 0 1-10.951-.577a17.9 17.9 0 0 1-5.43-3.35q-.15-.113-.151-.22c0-.047.021-.09.051-.13zm6.565-6.218q0-1.507.743-2.577c.495-.71 1.17-1.25 2.04-1.615c.796-.335 1.756-.575 2.912-.72c.39-.046 1.033-.103 1.92-.174v-.37c0-.93-.105-1.558-.3-1.875c-.302-.43-.78-.65-1.44-.65h-.182c-.48.046-.896.196-1.246.46c-.35.27-.575.63-.675 1.096c-.06.3-.206.465-.435.51l-2.52-.315c-.248-.06-.372-.18-.372-.39c0-.046.007-.09.022-.15q.372-1.935 1.82-2.88c.976-.616 2.1-.975 3.39-1.05h.54c1.65 0 2.957.434 3.888 1.29c.135.15.27.3.405.48c.12.165.224.314.283.45c.075.134.15.33.195.57c.06.254.105.42.135.51c.03.104.062.3.076.615c.01.313.02.493.02.553v5.28c0 .376.06.72.165 1.036q.157.471.315.674l.51.674q.136.204.136.36q0 .181-.18.314c-1.2 1.05-1.86 1.62-1.963 1.71q-.247.203-.63.045a6 6 0 0 1-.526-.496l-.31-.347a9 9 0 0 1-.317-.42l-.3-.435c-.81.886-1.603 1.44-2.4 1.665c-.494.15-1.093.227-1.83.227c-1.11 0-2.04-.343-2.76-1.034c-.72-.69-1.08-1.665-1.08-2.94l-.05-.076zm3.753-.438q-.001.848.425 1.364c.285.34.675.512 1.155.512c.045 0 .106-.007.195-.02c.09-.016.134-.023.166-.023c.614-.16 1.08-.553 1.424-1.178c.165-.28.285-.58.36-.91c.09-.32.12-.59.135-.8c.015-.195.015-.54.015-1.005v-.54c-.84 0-1.484.06-1.92.18c-1.275.36-1.92 1.17-1.92 2.43l-.035-.02zm9.162 7.027c.03-.06.075-.11.132-.17q.544-.365 1.05-.5a8 8 0 0 1 1.612-.24c.14-.012.28 0 .41.03c.65.06 1.05.168 1.172.33c.063.09.099.228.099.39v.15c0 .51-.149 1.11-.424 1.8q-.418 1.034-1.156 1.68q-.11.09-.197.09c-.03 0-.06 0-.09-.012c-.09-.044-.107-.12-.064-.24c.54-1.26.806-2.143.806-2.64c0-.15-.03-.27-.087-.344c-.145-.166-.55-.257-1.224-.257q-.364 0-.87.046c-.363.045-.7.09-1 .135q-.134 0-.18-.044c-.03-.03-.036-.047-.02-.077c0-.017.006-.03.02-.063v-.06z"/></svg>
+  {%- when 'brand-americanexpress' -%}<svg class="bl-icon bl-icon--brand-americanexpress {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M16.015 14.378c0-.32-.135-.496-.344-.622c-.21-.12-.464-.135-.81-.135h-1.543v2.82h.675v-1.027h.72c.24 0 .39.024.478.125c.12.13.104.38.104.55v.35h.66v-.555c-.002-.25-.017-.376-.108-.516a.75.75 0 0 0-.33-.234l.02-.008a.78.78 0 0 0 .48-.747zm-.87.407l-.028-.002c-.09.053-.195.058-.33.058h-.81v-.63h.824c.12 0 .24 0 .33.05a.27.27 0 0 1 .15.255c0 .12-.045.215-.134.27zm5.152 1.052H19v.6h1.304c.676 0 1.05-.278 1.05-.884c0-.28-.066-.448-.187-.582c-.153-.133-.392-.193-.73-.207l-.376-.015c-.104 0-.18 0-.255-.03a.21.21 0 0 1-.15-.21c0-.09.017-.166.09-.21a.5.5 0 0 1 .272-.06h1.23v-.602h-1.35c-.704 0-.958.437-.958.84c0 .9.776.855 1.407.87c.104 0 .18.015.225.06c.046.03.082.106.082.18c0 .077-.035.15-.08.18c-.06.053-.15.07-.277.07M0 0v10.096L.81 8.22h1.75l.225.464V8.22h2.043l.45 1.02l.437-1.013h6.502c.295 0 .56.057.756.236v-.23h1.787v.23c.307-.17.686-.23 1.12-.23h2.606l.24.466v-.466h1.918l.254.465v-.466h1.858v3.948H20.87l-.36-.6v.585h-2.353l-.256-.63h-.583l-.27.614h-1.213c-.48 0-.84-.104-1.08-.24v.24h-2.89v-.884c0-.12-.03-.12-.105-.135h-.105v1.036H6.067v-.48l-.21.48H4.69l-.202-.48v.465H2.235l-.256-.624H1.4l-.256.624H0V24h23.786v-7.108c-.27.135-.613.18-.973.18H21.09v-.255c-.21.165-.57.255-.914.255H14.71v-.9c0-.12-.018-.12-.12-.12h-.075v1.022h-1.8v-1.066c-.298.136-.643.15-.928.136h-.214v.915h-2.18l-.54-.617l-.57.6H4.742v-3.93h3.61l.518.602l.554-.6h2.412c.28 0 .74.03.942.225v-.24h2.177c.202 0 .644.045.903.225v-.24h3.265v.24c.163-.164.508-.24.803-.24h1.89v.24c.194-.15.464-.24.84-.24h1.176V0zm21.156 14.955l.01.016c.01.01.024.01.032.02zm2.672-1.873h.065v.555h-.065zm.037 1.948v-.005c-.03-.025-.046-.048-.075-.07c-.15-.153-.39-.215-.764-.225l-.36-.012a.9.9 0 0 1-.27-.03a.21.21 0 0 1-.15-.21q0-.136.09-.204c.076-.045.15-.05.27-.05h1.223v-.588h-1.283c-.69 0-.96.437-.96.84c0 .9.78.855 1.41.87c.104 0 .18.015.224.06c.046.03.076.106.076.18c0 .07-.034.138-.09.18c-.045.056-.136.07-.27.07h-1.288v.605h1.287c.42 0 .734-.118.9-.36h.03c.09-.134.135-.3.135-.523c0-.24-.045-.39-.135-.526zm-5.268-.822v-.583h-2.235v2.833h2.235v-.585h-1.57v-.57h1.533v-.584h-1.532v-.51M13.51 8.787h.685V11.6h-.684zm-.384.756l-.007.006c0-.314-.13-.5-.34-.624c-.217-.125-.47-.135-.81-.135H10.43v2.82h.674v-1.034h.72c.24 0 .39.03.487.12c.122.136.107.378.107.548v.354h.677v-.553c0-.25-.016-.375-.11-.516a.8.8 0 0 0-.33-.237c.172-.07.472-.3.472-.75zm-.855.396h-.015c-.09.054-.195.056-.33.056H11.1v-.623h.825c.12 0 .24.004.33.05c.09.04.15.128.15.25s-.047.22-.134.266zm3.649-.566h.632v-.6h-.644c-.464 0-.804.105-1.02.33c-.286.3-.362.69-.362 1.11c0 .512.123.833.36 1.074c.232.238.645.31.97.31h.78l.255-.627h1.39l.262.627h1.36v-2.11l1.272 2.11h.95l.002.002V8.786h-.684v1.963l-1.18-1.96h-1.02V11.4L18.11 8.744h-1.004l-.943 2.22h-.3c-.177 0-.362-.03-.468-.134c-.125-.15-.186-.36-.186-.662c0-.285.08-.51.194-.63c.133-.135.272-.165.516-.165zm1.668-.108l.464 1.118v.002h-.93zM2.38 10.97l.254.628H4V9.393l.972 2.205h.584l.973-2.202l.015 2.202h.69v-2.81H6.118l-.807 1.904l-.876-1.905H3.343v2.663L2.205 8.787h-.997L.01 11.597h.72l.26-.626zm-.688-1.705l.46 1.118l-.003.002h-.915l.457-1.12zm10.164 4.355H9.714l-.85.923l-.825-.922H5.346v2.82H8l.855-.932l.824.93h1.302v-.94h.838c.6 0 1.17-.164 1.17-.945l-.006-.003c0-.78-.598-.93-1.128-.93zM7.67 15.853l-.014-.002H6.02v-.557h1.47v-.574H6.02v-.51H7.7l.733.82l-.764.824zm2.642.33l-1.03-1.147l1.03-1.108v2.253zm1.553-1.258h-.885v-.717h.885c.24 0 .42.098.42.344c0 .243-.15.372-.42.372zM9.967 9.373v-.586H7.73V11.6h2.237v-.58H8.4v-.564h1.527V9.88H8.4v-.507"/></svg>
+  {%- when 'brand-apple' -%}<svg class="bl-icon bl-icon--brand-apple {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04c-2.04.027-3.91 1.183-4.961 3.014c-2.117 3.675-.546 9.103 1.519 12.09c1.013 1.454 2.208 3.09 3.792 3.039c1.52-.065 2.09-.987 3.935-.987c1.831 0 2.35.987 3.96.948c1.637-.026 2.676-1.48 3.676-2.948c1.156-1.688 1.636-3.325 1.662-3.415c-.039-.013-3.182-1.221-3.22-4.857c-.026-3.04 2.48-4.494 2.597-4.559c-1.429-2.09-3.623-2.324-4.39-2.376c-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83c-1.207.052-2.662.805-3.532 1.818c-.78.896-1.454 2.338-1.273 3.714c1.338.104 2.715-.688 3.559-1.701"/></svg>
+  {%- when 'brand-applepay' -%}<svg class="bl-icon bl-icon--brand-applepay {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m2.15 4.318l-.454.003c-.15.005-.303.013-.452.04a1.44 1.44 0 0 0-1.06.772c-.07.138-.114.278-.14.43c-.028.148-.037.3-.04.45L0 6.222v11.557q0 .104.003.207c.004.15.013.303.04.452q.039.224.142.429a1.44 1.44 0 0 0 .63.63c.138.07.278.115.43.142c.148.027.3.036.45.04l.208.003h20.194l.207-.003c.15-.004.303-.013.452-.04s.291-.071.428-.141a1.43 1.43 0 0 0 .631-.631c.07-.138.115-.278.141-.43c.027-.148.036-.3.04-.45q.003-.104.003-.208l.001-.246V6.221q0-.104-.004-.207a3 3 0 0 0-.04-.452a1.45 1.45 0 0 0-1.2-1.201a3 3 0 0 0-.452-.04a11 11 0 0 0-.453-.003zm0 .512h19.942q.098 0 .197.003c.115.004.25.01.375.032c.109.02.2.05.287.094a.93.93 0 0 1 .407.407a1 1 0 0 1 .094.288c.022.123.028.258.031.374q.003.097.003.197v11.552q0 .097-.003.196c-.003.115-.009.25-.032.375a.93.93 0 0 1-.5.693a1 1 0 0 1-.286.094a3 3 0 0 1-.373.032l-.2.003H1.906q-.1 0-.196-.003a3 3 0 0 1-.375-.032c-.109-.02-.2-.05-.288-.094a.9.9 0 0 1-.406-.407a1 1 0 0 1-.094-.288a2.5 2.5 0 0 1-.032-.373l-.002-.197V6.224l.002-.197c.004-.114.01-.248.032-.375c.02-.108.05-.199.094-.287a.93.93 0 0 1 .407-.406a1 1 0 0 1 .287-.094c.125-.022.26-.029.375-.032l.196-.003zm4.71 3.7c-.3.016-.668.199-.88.456c-.191.22-.36.58-.316.918c.338.03.675-.169.888-.418c.205-.258.345-.603.308-.955zm2.207.42v5.493h.852v-1.877h1.18c1.078 0 1.835-.739 1.835-1.812c0-1.07-.742-1.805-1.808-1.805zm.852.719h.982c.739 0 1.161.396 1.161 1.089c0 .692-.422 1.092-1.164 1.092h-.979zm-3.154.3c-.45.01-.83.28-1.05.28c-.235 0-.593-.264-.981-.257a1.45 1.45 0 0 0-1.23.747c-.527.908-.139 2.255.374 2.995c.249.366.549.769.944.754c.373-.014.52-.242.973-.242c.454 0 .586.242.98.235c.41-.007.667-.366.915-.733c.286-.417.403-.82.41-.841c-.007-.008-.79-.308-.797-1.209c-.008-.754.615-1.113.644-1.135c-.352-.52-.9-.578-1.09-.593zm8.204.397c-.99 0-1.606.533-1.652 1.256h.777c.072-.358.369-.586.845-.586c.502 0 .803.266.803.711v.309l-1.097.064c-.951.054-1.488.484-1.488 1.184c0 .72.548 1.207 1.332 1.207c.526 0 1.032-.281 1.264-.727h.019v.659h.788v-2.76c0-.803-.62-1.317-1.591-1.317m1.94.072l1.446 4.009c0 .003-.073.24-.073.247c-.125.41-.33.571-.711.571c-.069 0-.206 0-.267-.015v.666c.06.011.267.019.335.019c.83 0 1.226-.312 1.568-1.283l1.5-4.214h-.868l-1.012 3.259h-.015l-1.013-3.26zm-1.167 2.189v.316c0 .521-.45.917-1.024.917c-.442 0-.731-.228-.731-.579c0-.342.278-.56.769-.593z"/></svg>
+  {%- when 'brand-bluesky' -%}<svg class="bl-icon bl-icon--brand-bluesky {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037c-.856 3.061-3.978 3.842-6.755 3.37c4.854.826 6.089 3.562 3.422 6.299c-5.065 5.196-7.28-1.304-7.847-2.97c-.104-.305-.152-.448-.153-.327c0-.121-.05.022-.153.327c-.568 1.666-2.782 8.166-7.847 2.97c-2.667-2.737-1.432-5.473 3.422-6.3c-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg>
+  {%- when 'brand-discord' -%}<svg class="bl-icon bl-icon--brand-discord {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0a13 13 0 0 0-.617-1.25a.08.08 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.1.1 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.08.08 0 0 0 .084-.028a14 14 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13 13 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10 10 0 0 0 .372-.292a.07.07 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.07.07 0 0 1 .078.01q.181.149.373.292a.077.077 0 0 1-.006.127a12.3 12.3 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.08.08 0 0 0 .084.028a19.8 19.8 0 0 0 6.002-3.03a.08.08 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03M8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418m7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418"/></svg>
+  {%- when 'brand-facebook' -%}<svg class="bl-icon bl-icon--brand-facebook {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978c.401 0 .955.042 1.468.103a9 9 0 0 1 1.141.195v3.325a9 9 0 0 0-.653-.036a27 27 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.7 1.7 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103l-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647"/></svg>
+  {%- when 'brand-github' -%}<svg class="bl-icon bl-icon--brand-github {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+  {%- when 'brand-google' -%}<svg class="bl-icon bl-icon--brand-google {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133c-1.147 1.147-2.933 2.4-6.053 2.4c-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0C5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36c2.16-2.16 2.84-5.213 2.84-7.667c0-.76-.053-1.467-.173-2.053z"/></svg>
+  {%- when 'brand-googlepay' -%}<svg class="bl-icon bl-icon--brand-googlepay {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M3.963 7.235A3.96 3.96 0 0 0 .422 9.419a3.96 3.96 0 0 0 0 3.559a3.96 3.96 0 0 0 3.541 2.184c1.07 0 1.97-.352 2.627-.957c.748-.69 1.18-1.71 1.18-2.916a5 5 0 0 0-.07-.806H3.964v1.526h2.14a1.84 1.84 0 0 1-.79 1.205c-.356.241-.814.379-1.35.379c-1.034 0-1.911-.697-2.225-1.636a2.38 2.38 0 0 1 0-1.517c.314-.94 1.191-1.636 2.225-1.636a2.15 2.15 0 0 1 1.52.594l1.132-1.13a3.8 3.8 0 0 0-2.652-1.033zm6.501.55v6.9h.886V11.89h1.465q.904 0 1.522-.588a1.91 1.91 0 0 0 .635-1.464a1.92 1.92 0 0 0-.635-1.456a2.13 2.13 0 0 0-1.522-.598zm2.427.85a1.16 1.16 0 0 1 .823.365a1.176 1.176 0 0 1 0 1.686a1.17 1.17 0 0 1-.877.357H11.35V8.635zm4.124 1.175q-1.262 0-1.907.925l.781.491q.432-.626 1.175-.626a1.25 1.25 0 0 1 .856.323a1 1 0 0 1 .366.785v.202q-.51-.29-1.3-.289q-.926 0-1.479.434q-.555.432-.554 1.165a1.48 1.48 0 0 0 .525 1.156q.525.463 1.305.463q.915 0 1.465-.81h.038v.655h.848v-2.909q0-.915-.568-1.44q-.57-.525-1.551-.525m2.263.154l1.946 4.422l-1.098 2.38h.915L24 9.963h-.965l-1.368 3.391h-.02l-1.406-3.39zm-2.146 2.368q.741 0 1.156.33q0 .558-.44.973a1.4 1.4 0 0 1-.997.414a1.08 1.08 0 0 1-.69-.232a.71.71 0 0 1-.293-.578q0-.383.363-.647q.36-.26.9-.26Z"/></svg>
+  {%- when 'brand-instagram' -%}<svg class="bl-icon bl-icon--brand-instagram {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M7.03.084c-1.277.06-2.149.264-2.91.563a5.9 5.9 0 0 0-2.124 1.388a5.9 5.9 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076s-.069 1.688-.063 4.947s.021 3.667.083 4.947c.061 1.277.264 2.149.563 2.911c.308.789.72 1.457 1.388 2.123a5.9 5.9 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552c1.278.056 1.689.069 4.947.063s3.668-.021 4.947-.082c1.28-.06 2.147-.265 2.91-.563a5.9 5.9 0 0 0 2.123-1.388a5.9 5.9 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912c.056-1.28.07-1.69.063-4.948c-.006-3.258-.02-3.667-.081-4.947c-.06-1.28-.264-2.148-.564-2.911a5.9 5.9 0 0 0-1.387-2.123a5.9 5.9 0 0 0-2.128-1.38c-.764-.294-1.636-.496-2.914-.55C15.647.009 15.236-.006 11.977 0S8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.7 3.7 0 0 1-1.382-.895a3.7 3.7 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228c-.06-1.264-.072-1.644-.08-4.848c-.006-3.204.006-3.583.061-4.848c.05-1.169.246-1.805.408-2.228c.216-.561.477-.96.895-1.382a3.7 3.7 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417c1.265-.06 1.644-.072 4.848-.08c3.203-.006 3.583.006 4.85.062c1.168.05 1.804.244 2.227.408c.56.216.96.475 1.382.895s.681.817.9 1.378c.165.422.362 1.056.417 2.227c.06 1.265.074 1.645.08 4.848c.005 3.203-.006 3.583-.061 4.848c-.051 1.17-.245 1.805-.408 2.23c-.216.56-.477.96-.896 1.38a3.7 3.7 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418c-1.266.06-1.645.072-4.85.079s-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442a1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024a6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16A4 4 0 0 1 8 12.008"/></svg>
+  {%- when 'brand-linkedin' -%}<svg class="bl-icon bl-icon--brand-linkedin {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>
+  {%- when 'brand-mastercard' -%}<svg class="bl-icon bl-icon--brand-mastercard {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M11.343 18.031q.088.074.181.146a7.4 7.4 0 0 1-4.107 1.238a7.416 7.416 0 1 1 4.104-13.593c-.06.051-.12.098-.165.15A7.96 7.96 0 0 0 8.595 12a8 8 0 0 0 2.748 6.031m5.241-13.447c-1.52 0-2.931.456-4.105 1.238c.06.051.12.098.165.15A7.96 7.96 0 0 1 15.405 12a8 8 0 0 1-2.748 6.031q-.088.074-.181.146a7.4 7.4 0 0 0 4.107 1.238A7.414 7.414 0 0 0 24 12a7.417 7.417 0 0 0-7.416-7.416M12 6.174q-.144.111-.28.231A7.4 7.4 0 0 0 9.169 12A7.39 7.39 0 0 0 12 17.827q.144-.112.28-.232A7.4 7.4 0 0 0 14.831 12A7.39 7.39 0 0 0 12 6.174"/></svg>
+  {%- when 'brand-paypal' -%}<svg class="bl-icon bl-icon--brand-paypal {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513c-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541c-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"/></svg>
+  {%- when 'brand-pinterest' -%}<svg class="bl-icon bl-icon--brand-pinterest {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162c-.105-.949-.199-2.403.041-3.439c.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911c1.024 0 1.518.769 1.518 1.688c0 1.029-.653 2.567-.992 3.992c-.285 1.193.6 2.165 1.775 2.165c2.128 0 3.768-2.245 3.768-5.487c0-2.861-2.063-4.869-5.008-4.869c-3.41 0-5.409 2.562-5.409 5.199c0 1.033.394 2.143.889 2.741c.099.12.112.225.085.345c-.09.375-.293 1.199-.334 1.363c-.053.225-.172.271-.401.165c-1.495-.69-2.433-2.878-2.433-4.646c0-3.776 2.748-7.252 7.92-7.252c4.158 0 7.392 2.967 7.392 6.923c0 4.135-2.607 7.462-6.233 7.462c-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146c1.123.345 2.306.535 3.55.535c6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z"/></svg>
+  {%- when 'brand-reddit' -%}<svg class="bl-icon bl-icon--brand-reddit {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286A.72.72 0 0 0 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0m4.388 3.199a1.999 1.999 0 1 1-1.947 2.46v.002a2.37 2.37 0 0 0-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363a2.802 2.802 0 1 1 2.908 4.753c-.088 3.256-3.637 5.876-7.997 5.876c-4.361 0-7.905-2.617-7.998-5.87a2.8 2.8 0 0 1 1.189-5.34c.645 0 1.239.218 1.712.585c1.275-.79 2.881-1.291 4.64-1.365v-.01a3.23 3.23 0 0 1 2.88-3.207a2 2 0 0 1 1.959-1.595m-8.085 8.376c-.784 0-1.459.78-1.506 1.797s.64 1.429 1.426 1.429s1.371-.369 1.418-1.385s-.553-1.841-1.338-1.841m7.406 0c-.786 0-1.385.824-1.338 1.841s.634 1.385 1.418 1.385c.785 0 1.473-.413 1.426-1.429c-.046-1.017-.721-1.797-1.506-1.797m-3.703 4.013c-.974 0-1.907.048-2.77.135a.222.222 0 0 0-.183.305a3.2 3.2 0 0 0 2.953 1.964a3.2 3.2 0 0 0 2.953-1.964a.222.222 0 0 0-.184-.305a28 28 0 0 0-2.769-.135"/></svg>
+  {%- when 'brand-shopify' -%}<svg class="bl-icon bl-icon--brand-shopify {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136s-1.275-1.274-1.439-1.411a.4.4 0 0 0-.121-.074l-.914 21.104zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141c0 1.232 3.24 1.715 3.24 4.629c0 2.295-1.44 3.76-3.406 3.76c-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066a.944.944 0 0 0 .975-.932c0-1.619-2.654-1.694-2.654-4.359c-.034-2.237 1.571-4.416 4.827-4.416c1.257 0 1.875.361 1.875.361l-.945 2.715zM11.17.83c.136 0 .271.038.405.135c-.984.465-2.064 1.639-2.508 3.992a63 63 0 0 1-1.889.578C7.697 3.75 8.951.84 11.17.84zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736c.466-1.777 1.333-2.645 2.085-2.971c.193.501.309 1.176.309 2.1m.539-2.234c.694.074 1.141.867 1.429 1.755c-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0C8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674c-.675.213-.694.232-.772.87c-.075.462-1.83 14.063-1.83 14.063L15.009 24z"/></svg>
+  {%- when 'brand-snapchat' -%}<svg class="bl-icon bl-icon--brand-snapchat {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.206.793c.99 0 4.347.276 5.93 3.821c.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51c.075.045.203.09.401.09c.3-.016.659-.12 1.033-.301a1 1 0 0 1 .464-.104c.182 0 .359.029.509.09c.45.149.734.479.734.838q.022.674-1.213 1.168c-.089.029-.209.075-.344.119c-.45.135-1.139.36-1.333.81c-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014c.255.044.435.27.42.509a.6.6 0 0 1-.045.225c-.24.569-1.273.988-3.146 1.271c-.059.091-.12.375-.164.57c-.029.179-.074.36-.134.553c-.076.271-.27.405-.555.405h-.03a3 3 0 0 1-.538-.074a6 6 0 0 0-1.273-.135c-.3 0-.599.015-.913.074c-.6.104-1.123.464-1.723.884c-.853.599-1.826 1.288-3.294 1.288c-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288c-.599-.42-1.107-.779-1.707-.884a7 7 0 0 0-.928-.074c-.54 0-.958.089-1.272.149a3 3 0 0 1-.54.074c-.374 0-.523-.224-.583-.42c-.061-.192-.09-.389-.135-.567c-.046-.181-.105-.494-.166-.57c-1.918-.222-2.95-.642-3.189-1.226a.6.6 0 0 1-.055-.225a.496.496 0 0 1 .42-.509c3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869c-.195-.434-.884-.658-1.332-.809a2 2 0 0 1-.346-.119c-1.107-.435-1.257-.93-1.197-1.273c.09-.479.674-.793 1.168-.793c.146 0 .27.029.383.074c.42.194.789.3 1.104.3c.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z"/></svg>
+  {%- when 'brand-spotify' -%}<svg class="bl-icon bl-icon--brand-spotify {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12s12-5.4 12-12S18.66 0 12 0m5.521 17.34c-.24.359-.66.48-1.021.24c-2.82-1.74-6.36-2.101-10.561-1.141c-.418.122-.779-.179-.899-.539c-.12-.421.18-.78.54-.9c4.56-1.021 8.52-.6 11.64 1.32c.42.18.479.659.301 1.02m1.44-3.3c-.301.42-.841.6-1.262.3c-3.239-1.98-8.159-2.58-11.939-1.38c-.479.12-1.02-.12-1.14-.6s.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2m.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721c-.18-.601.18-1.2.72-1.381c4.26-1.26 11.28-1.02 15.721 1.621c.539.3.719 1.02.419 1.56c-.299.421-1.02.599-1.559.3"/></svg>
+  {%- when 'brand-telegram' -%}<svg class="bl-icon bl-icon--brand-telegram {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12a12 12 0 0 0 12-12A12 12 0 0 0 12 0zm4.962 7.224c.1-.002.321.023.465.14a.5.5 0 0 1 .171.325c.016.093.036.306.02.472c-.18 1.898-.962 6.502-1.36 8.627c-.168.9-.499 1.201-.82 1.23c-.696.065-1.225-.46-1.9-.902c-1.056-.693-1.653-1.124-2.678-1.8c-1.185-.78-.417-1.21.258-1.91c.177-.184 3.247-2.977 3.307-3.23c.007-.032.014-.15-.056-.212s-.174-.041-.249-.024q-.159.037-5.061 3.345q-.72.495-1.302.48c-.428-.008-1.252-.241-1.865-.44c-.752-.245-1.349-.374-1.297-.789q.04-.324.893-.663q5.247-2.286 6.998-3.014c3.332-1.386 4.025-1.627 4.476-1.635"/></svg>
+  {%- when 'brand-threads' -%}<svg class="bl-icon bl-icon--brand-threads {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586c-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543c1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735c.798.361 1.348 1.204 1.348 2.47c0 3.387-3.907 5.232-7.22 5.232c-4.885 0-8.077-3.207-8.077-8.424c0-6.392 4.223-10.487 9.9-10.487c3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0C6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066c4.878 0 9.809-2.846 9.809-7.716c0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453c0-1.483 1.822-1.934 3.606-1.934c.678 0 1.34.045 1.927.173c-.422 1.927-1.671 3.215-3.508 3.214Z"/></svg>
+  {%- when 'brand-tiktok' -%}<svg class="bl-icon bl-icon--brand-tiktok {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.525.02c1.31-.02 2.61-.01 3.91-.02c.08 1.53.63 3.09 1.75 4.17c1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97c-.57-.26-1.1-.59-1.62-.93c-.01 2.92.01 5.84-.02 8.75c-.08 1.4-.54 2.79-1.35 3.94c-1.31 1.92-3.58 3.17-5.91 3.21c-1.43.08-2.86-.31-4.08-1.03c-2.02-1.19-3.44-3.37-3.65-5.71c-.02-.5-.03-1-.01-1.49c.18-1.9 1.12-3.72 2.58-4.96c1.66-1.44 3.98-2.13 6.15-1.72c.02 1.48-.04 2.96-.04 4.44c-.99-.32-2.15-.23-3.02.37c-.63.41-1.11 1.04-1.36 1.75c-.21.51-.15 1.07-.14 1.61c.24 1.64 1.82 3.02 3.5 2.87c1.12-.01 2.19-.66 2.77-1.61c.19-.33.4-.67.41-1.06c.1-1.79.06-3.57.07-5.36c.01-4.03-.01-8.05.02-12.07"/></svg>
+  {%- when 'brand-tripadvisor' -%}<svg class="bl-icon bl-icon--brand-tripadvisor {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12.006 4.295c-2.67 0-5.338.784-7.645 2.353H0l1.963 2.135a5.997 5.997 0 0 0 4.04 10.43a5.98 5.98 0 0 0 4.075-1.6L12 19.705l1.922-2.09a5.97 5.97 0 0 0 4.072 1.598a6 6 0 0 0 6-5.998a5.98 5.98 0 0 0-1.957-4.432L24 6.648h-4.35a13.57 13.57 0 0 0-7.644-2.353M12 6.255c1.531 0 3.063.303 4.504.903C13.943 8.138 12 10.43 12 13.1c0-2.671-1.942-4.962-4.504-5.942A11.7 11.7 0 0 1 12 6.256zM6.002 9.157a4.059 4.059 0 1 1 0 8.118a4.059 4.059 0 0 1 0-8.118m11.992.002a4.057 4.057 0 1 1 .003 8.115a4.057 4.057 0 0 1-.003-8.115m-11.992 1.93a2.128 2.128 0 0 0 0 4.256a2.128 2.128 0 0 0 0-4.256m11.992 0a2.128 2.128 0 0 0 0 4.256a2.128 2.128 0 0 0 0-4.256"/></svg>
+  {%- when 'brand-vimeo' -%}<svg class="bl-icon bl-icon--brand-vimeo {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M23.977 6.417c-.105 2.338-1.74 5.543-4.894 9.609c-3.268 4.247-6.026 6.37-8.29 6.37c-1.41 0-2.578-1.294-3.553-3.881L5.322 11.4Q4.244 7.524 3.01 7.523q-.27 0-1.881 1.132l-1.13-1.457A315 315 0 0 0 3.502 4.07C5.08 2.702 6.266 1.985 7.055 1.91q2.8-.27 3.447 3.839q.698 4.43.97 5.507q.81 3.675 1.777 3.674q.752 0 2.265-2.385q1.505-2.383 1.612-3.628c.144-1.371-.395-2.061-1.614-2.061c-.574 0-1.167.12-1.777.39C14.92 3.38 17.169 1.49 20.497 1.61c2.473.06 3.628 1.664 3.493 4.797z"/></svg>
+  {%- when 'brand-visa' -%}<svg class="bl-icon bl-icon--brand-visa {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 0 1 .894.764l.817 4.338l2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972c.006-.269.262-.555.822-.628a3.66 3.66 0 0 1 1.913.336l.34-1.59a5.2 5.2 0 0 0-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479c-.012 1.079.963 1.68 1.698 2.04c.756.367 1.01.603 1.006.931c-.005.504-.602.725-1.16.734c-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398c2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.88.88 0 0 0-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815l.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"/></svg>
+  {%- when 'brand-whatsapp' -%}<svg class="bl-icon bl-icon--brand-whatsapp {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967c-.273-.099-.471-.148-.67.15c-.197.297-.767.966-.94 1.164c-.173.199-.347.223-.644.075c-.297-.15-1.255-.463-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.018-.458.13-.606c.134-.133.298-.347.446-.52s.198-.298.298-.497c.099-.198.05-.371-.025-.52s-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51a13 13 0 0 0-.57-.01c-.198 0-.52.074-.792.372c-.272.297-1.04 1.016-1.04 2.479c0 1.462 1.065 2.875 1.213 3.074s2.096 3.2 5.077 4.487c.709.306 1.262.489 1.694.625c.712.227 1.36.195 1.871.118c.571-.085 1.758-.719 2.006-1.413s.248-1.289.173-1.413c-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214l-3.741.982l.998-3.648l-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884c2.64 0 5.122 1.03 6.988 2.898a9.82 9.82 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.82 11.82 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.9 11.9 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.82 11.82 0 0 0-3.48-8.413"/></svg>
+  {%- when 'brand-wordpress' -%}<svg class="bl-icon bl-icon--brand-wordpress {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175c0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864c0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105c.582-.075.514-.93-.067-.899c0 0-1.755.135-2.88.135c-1.064 0-2.85-.15-2.85-.15c-.585-.03-.661.855-.075.885c0 0 .54.061 1.125.09l1.68 4.605l-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1c.585-.075.516-.93-.065-.896c0 0-1.746.138-2.874.138c-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833c-.046-.003-.091-.009-.141-.009c-1.06 0-1.812.923-1.812 1.914c0 .89.513 1.643 1.06 2.531c.411.72.89 1.643.89 2.977c0 .915-.354 1.994-.821 3.479l-1.075 3.585l-3.9-11.61zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406l3.315 9.087q.036.078.078.149c-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709A10.79 10.79 0 0 1 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12s12-5.385 12-12S18.615 0 12 0"/></svg>
+  {%- when 'brand-x' -%}<svg class="bl-icon bl-icon--brand-x {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z"/></svg>
+  {%- when 'brand-yelp' -%}<svg class="bl-icon bl-icon--brand-yelp {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="m7.689 15.142l-3.672.848c-.377.087-.755.183-1.145.155c-.261-.019-.512-.042-.76-.213a1.2 1.2 0 0 1-.332-.36c-.348-.551-.365-1.366-.37-2a6.3 6.3 0 0 1 .332-2.064a2 2 0 0 1 .107-.248a2 2 0 0 1 .126-.216a3 3 0 0 1 .156-.198a1.2 1.2 0 0 1 .399-.283a1.1 1.1 0 0 1 .46-.083c.235.001.513.052.91.173c.055.02.123.038.185.057c.328.101.705.24 1.15.399q1.027.36 2.046.74l1.212.442q.333.12.64.297c.175.098.328.23.452.387a1.2 1.2 0 0 1 .192.43a1.22 1.22 0 0 1-.872 1.453q-.072.022-.108.03l-1.105.255zM18.82 7.565a2 2 0 0 0-.204-.175a2 2 0 0 0-.208-.14a2 2 0 0 0-.227-.109a1.2 1.2 0 0 0-.482-.08a1.1 1.1 0 0 0-.45.127c-.21.105-.439.273-.742.555c-.042.042-.095.089-.142.133c-.25.235-.528.525-.86.863a115 115 0 0 0-1.516 1.563l-.897.93a4 4 0 0 0-.446.548a1.5 1.5 0 0 0-.237.545a1.2 1.2 0 0 0 .011.452l.005.02a1.22 1.22 0 0 0 1.418.923a1 1 0 0 0 .11-.021l4.779-1.104c.376-.087.758-.167 1.097-.363c.227-.132.443-.262.59-.525a1.2 1.2 0 0 0 .141-.469c.073-.65-.267-1.39-.54-1.963a6.3 6.3 0 0 0-1.2-1.71M8.97.075a9 9 0 0 0-.83.157q-.415.097-.815.223c-.868.285-2.089.807-2.295 1.807c-.117.565.16 1.144.373 1.66c.26.625.614 1.189.938 1.778c.854 1.554 1.724 3.099 2.592 4.645c.259.462.542 1.047 1.043 1.286a1 1 0 0 0 .101.038c.225.085.47.102.704.047l.042-.01a1.2 1.2 0 0 0 .566-.34a1 1 0 0 0 .079-.081c.346-.435.345-1.084.376-1.614c.104-1.77.214-3.542.301-5.314c.033-.671.106-1.333.066-2.01c-.033-.557-.037-1.198-.39-1.656c-.621-.807-1.947-.74-2.852-.616m2.083 15.95a1.105 1.105 0 0 0-1.23-.414a1 1 0 0 0-.153.064a1.5 1.5 0 0 0-.217.135c-.2.148-.367.34-.52.532c-.038.049-.074.114-.12.156l-.768 1.057a114 114 0 0 0-1.291 1.79c-.278.389-.519.718-.709 1.009c-.036.054-.073.116-.107.164c-.228.352-.357.61-.423.838a1.1 1.1 0 0 0-.046.472c.021.166.077.325.163.467q.069.108.15.207a2 2 0 0 0 .174.183a2 2 0 0 0 .211.173c.53.37 1.111.634 1.722.84a6 6 0 0 0 1.572.3q.136.006.273-.006a2 2 0 0 0 .25-.035a2 2 0 0 0 .245-.071a1.2 1.2 0 0 0 .418-.266c.112-.113.199-.25.254-.4c.089-.22.147-.502.185-.92c.004-.059.012-.13.018-.195c.03-.346.044-.753.067-1.231q.056-1.103.09-2.203l.05-1.306c.01-.3.001-.634-.082-.934a1.4 1.4 0 0 0-.176-.405m8.676 2.045c-.16-.176-.388-.352-.746-.568l-.169-.101c-.298-.18-.658-.369-1.078-.597a121 121 0 0 0-1.943-1.042l-1.151-.61c-.06-.018-.12-.061-.177-.088a3 3 0 0 0-.699-.25a1.5 1.5 0 0 0-.254-.027a1 1 0 0 0-.165.01a1.11 1.11 0 0 0-.923.914a1.4 1.4 0 0 0 .016.439c.056.306.193.61.335.875l.615 1.152q.512.975 1.043 1.94c.23.421.42.78.598 1.079c.034.056.072.116.101.168c.218.358.392.584.57.746a1.1 1.1 0 0 0 .894.301a2 2 0 0 0 .25-.043q.124-.033.242-.078a2 2 0 0 0 .247-.115a6 6 0 0 0 1.282-.96a6.7 6.7 0 0 0 1.182-1.51q.066-.12.114-.248a3 3 0 0 0 .077-.24a3 3 0 0 0 .043-.252a1.2 1.2 0 0 0-.056-.491a1.1 1.1 0 0 0-.248-.404m2.86 3.742a.85.85 0 0 1-.111.423a.85.85 0 0 1-.312.318a.84.84 0 0 1-.438.119a.85.85 0 0 1-.438-.118a.85.85 0 0 1-.312-.317a.86.86 0 0 1-.111-.425q0-.23.114-.43a.84.84 0 0 1 .315-.316a.85.85 0 0 1 .432-.115a.85.85 0 0 1 .43.114a.84.84 0 0 1 .315.315a.85.85 0 0 1 .116.432m-.12 0q0-.2-.1-.37a.6.6 0 0 0-.27-.27a.7.7 0 0 0-.371-.1a.7.7 0 0 0-.37.099a.75.75 0 0 0-.271.27a.7.7 0 0 0-.1.37q0 .199.1.372a.74.74 0 0 0 .27.271a.74.74 0 0 0 .37.099a.7.7 0 0 0 .37-.1a.74.74 0 0 0 .27-.27a.7.7 0 0 0 .102-.371m-.577.058l.272.452h-.192l-.237-.405h-.155v.405h-.17v-1.02h.3q.19 0 .278.075q.09.075.089.227a.3.3 0 0 1-.05.162a.3.3 0 0 1-.135.104m-.042-.14a.15.15 0 0 0 .056-.122q0-.086-.049-.122q-.05-.039-.156-.038h-.12v.328h.123q.091 0 .146-.047z"/></svg>
+  {%- when 'brand-youtube' -%}<svg class="bl-icon bl-icon--brand-youtube {{ class }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"/></svg>
+{%- else -%}{%- comment -%} unknown icon "{{ name }}" {%- endcomment -%}
+{%- endcase -%}
+
+{% stylesheet %}
+  /* 1em by default so an icon follows its text; components (e.g. .button svg) size it from their tokens */
+  .bl-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; pointer-events: none; }
+{% endstylesheet %}

package/templates/shopify/snippets/image.liquid

@@ -0,0 +1,64 @@
+{% doc %}
+  Renders a responsive image that might be wrapped in a link.
+
+  When `width`, `height` and `crop` are provided, the image will be rendered
+  with a fixed aspect ratio.
+
+  Serves as an example of how to use the `image_url` filter and `image_tag` filter
+  as well as how you can use LiquidDoc to document your code.
+
+  @param {image} image - The image to be rendered
+  @param {string} [url] - An optional destination URL for the image
+  @param {string} [class] - Optional class to be added to the image wrapper
+  @param {number} [width] - The highest resolution width of the image to be rendered
+  @param {number} [height] - The highest resolution height of the image to be rendered
+  @param {string} [crop] - The crop position of the image
+
+  @example
+  {% render 'image', image: product.featured_image %}
+  {% render 'image', image: product.featured_image, url: product.url %}
+  {% render 'image',
+    class: 'product__image',
+    image: product.featured_image,
+    url: product.url,
+    width: 1200,
+    height: 800,
+    crop: 'center',
+  %}
+{% enddoc %}
+
+{% liquid
+  unless height
+    assign width = width | default: image.width
+  endunless
+
+  if url
+    assign wrapper = 'a'
+  else
+    assign wrapper = 'div'
+  endif
+%}
+
+<{{ wrapper }}
+  class="image {{ class }}"
+  {% if url %}
+    href="{{ url }}"
+  {% endif %}
+>
+  {{ image | image_url: width: width, height: height, crop: crop | image_tag }}
+</{{ wrapper }}>
+
+{% stylesheet %}
+  .image {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: auto;
+  }
+
+  .image > img {
+    width: 100%;
+    height: auto;
+  }
+{% endstylesheet %}