ihk24/gfi-ihk-2024/stories/styleguide/icon-grid/IconGridComponent.js

import './icon-grid.scss';
import {createElement} from "../../_global/scripts/helpers";

export const extractGlyphClassNames = (scssSource, prefix) => {
  const pattern = new RegExp(`\\.(${prefix}-[a-zA-Z0-9_-]+):before`, 'g');
  const names = [];
  const seen = new Set();
  let match;
  while ((match = pattern.exec(scssSource)) !== null) {
    if (!seen.has(match[1])) {
      seen.add(match[1]);
      names.push(match[1]);
    }
  }
  return names;
};

export const createIconGrid = ({classNames = [], variant = 'pictograms'} = {}) => {
  const grid = createElement('div', ['icon-grid', `icon-grid--${variant}`]);

  classNames.forEach((className) => {
    const item = createElement('div', ['icon-grid__item'], null, grid);
    createElement('span', ['icon-grid__glyph', className], null, item);
    createElement('code', ['icon-grid__label'], className, item);
  });

  return grid;
};