How to use @carbon/icon-helpers - 10 common examples

const icon = descriptor => {
  descriptor.attrs = getAttributes(
    Object.assign(descriptor.attrs, {
      '...': '${spread(attrs)}', // eslint-disable-line no-template-curly-in-string
    })
  );
  descriptor.content.unshift('${children}'); // eslint-disable-line no-template-curly-in-string
  return `({ children, ...attrs } = {}) => svg\`${toString(descriptor)}\``;
};

async function generateComponents() {
  // loop through the icons meta array
  for (const icon of icons) {
    const className = icon.moduleName;
    const selectorName = param(icon.moduleName);
    const rawSvg = toString(icon.descriptor);
    const outputPath = icon.outputOptions.file
      .replace('es', 'ts')
      .replace('.js', '.ts');
    // try to write out the component
    try {
      await fs.ensureDir(dirname(outputPath));
      await fs.writeFile(
        outputPath,
        componentTemplate(
          selectorName,
          className,
          rawSvg,
          icon.descriptor.attrs
        )
      );
    } catch (err) {

function js2svg(descriptor) {
  const { elem, attrs = {}, content = [] } = descriptor;
  let attributes = attrs;

  if (elem === 'svg') {
    const { style, ...iconAttributes } = getAttributes(attrs);
    attributes = {
      ...iconAttributes,
      style: style
        .split(';')
        .map(declaration => {
          const [property, value] = declaration
            .split(':')
            .map(string => string.trim());
          return {
            [property]: value,
          };
        })
        .reduce(
          (acc, declaration) => ({
            ...acc,
            ...declaration,

const icon = (descriptor, attributes = {}) => {
  const { title, ...rest } = getAttributes(Object.assign(descriptor.attrs, attributes));
  descriptor.attrs = rest;
  if (title) {
    const id = `__carbon-icon__${Math.random()
      .toString(36)
      .substr(2)}`;
    descriptor.content.push({
      elem: 'title',
      attrs: {
        id,
      },
      content: [title],
    });
    descriptor.attrs['aria-describedby'] = id;
  }
  const strings = [toString(descriptor)];
  return svg(Object.assign(strings, { raw: strings }) as TemplateStringsArray);

function iconHelper(name, attributes = {}, options = {}) {
  const icon = CarbonIcons[name];
  if (!icon) {
    throw new Error(`Unable to find the icon: \`${name}\``);
  }
  const content = icon.content.map(toString);
  const attrs = {
    ...icon.attrs,
    ...Object.assign({}, attributes.hash || attributes, options.hash),
  };
  return new SafeString(
    `<svg>${content.join('')}</svg>`
  );
}

const Icon = React.forwardRef(function Icon(
  { className, children, style = {}, tabIndex, ...rest },
  ref
) {
  const { tabindex, ...props } = getAttributes({
    ...rest,
    tabindex: tabIndex,
  });

  if (className) {
    props.className = className;
  }

  if (tabindex !== undefined && tabindex !== null) {
    props.tabIndex = tabindex;
  }

  if (ref) {
    props.ref = ref;
  }

const toString = descriptor => {
  if (typeof descriptor === 'string') {
    return descriptor;
  }
  const { elem = 'svg', attrs = {}, content = [] } = descriptor;
  const children = content.map(toString).join('');
  if (elem !== 'svg') {
    return `<${elem} ${formatAttributes(attrs)}>${children}`;
  }
  return `<${elem} ${formatAttributes(getAttributes(attrs))}>${children}`;
};

const toString = descriptor => {
  if (typeof descriptor === 'string') {
    return descriptor;
  }
  const { elem = 'svg', attrs = {}, content = [] } = descriptor;
  const children = content.map(toString).join('');
  if (elem !== 'svg') {
    return `<${elem} ${formatAttributes(attrs)}>${children}`;
  }
  return `<${elem} ${formatAttributes(getAttributes(attrs))}>${children}`;
};

const toString = descriptor => {
  if (typeof descriptor === 'string') {
    return descriptor;
  }
  const { elem = 'svg', attrs = {}, content = [] } = descriptor;
  const children = content.map(toString).join('');
  if (elem !== 'svg') {
    return `<${elem} ${formatAttributes(attrs)}>${children}`;
  }
  return `<${elem} ${formatAttributes(getAttributes(attrs))}>${children}`;
};

const toString = descriptor => {
  if (typeof descriptor === 'string') {
    return descriptor;
  }
  const { elem = 'svg', attrs = {}, content = [] } = descriptor;
  const children = content.map(toString).join('');
  if (elem !== 'svg') {
    return `<${elem} ${formatAttributes(attrs)}>${children}`;
  }
  return `<${elem} ${formatAttributes(getAttributes(attrs))}>${children}`;
};