docs: async function transpileIcons(icons) {
    await fs.mkdirp(buildDir);
  
    return Promise.all(
      icons.map(async icon => {
        const svg = await fs.readFile(icon, 'utf-8');
        const id = path
          .basename(icon, '.svg')
          .replace(/ /g, '-')
          .replace('.colored', '-colored');
  
        const $ = cheerio.load(svg, {
          xmlMode: true,
        });
  
        const fileName = path
          .basename(icon)
          .replace(/ /g, '-')
          .replace('.colored', '-colored')
          .replace('.svg', '.js');
        const location = path.join(buildDir, fileName);
  
        $('*').each((index, el) => {
          Object.keys(el.attribs).forEach(x => {
            if (x === 'stroke') {
              $(el).attr(x, 'currentColor');
            }
  
            if (x === 'fill') {
              $(el).attr(x, 'currentColor');
            }
          });
  
          if (el.name === 'svg') {
            $(el).attr('otherProps', '...');
          }
  
          // Remove artboard rectangle that sometimes pops up in exported SVGs
          if ($(el).attr('id') === 'Rectangle-6') {
            $(el).remove();
          }
  
          $(el).removeAttr('xmlns:xlink');
  
          if ($(el).attr('xlink:href')) {
            const xlinkHrefVal = $(el).attr('xlink:href');
            $(el).removeAttr('xlink:href');
            $(el).attr('xlinkHref', xlinkHrefVal);
          }
  
          if ($(el).attr('xlink:href')) {
            const xlinkHrefVal = $(el).attr('xlink:href');
            $(el).removeAttr('xlink:href');
            $(el).attr('xlinkHref', xlinkHrefVal);
          }
        });
  
        const result = await svgo.optimize(svg);
        const optimizedSVG = result.data;
  
        const element = `
    import { h } from '@bolt/core/renderers';
  
    export const ${uppercamelcase(
      id,
    )} = ({ bgColor, fgColor, size, ...otherProps }) => {
        return (
          ${
            fileName.includes('-color')
              ? $(optimizedSVG)
                  .toString()
                  .replace('viewBox', '{...otherProps} viewBox') // tack on extra props next to viewBox attribute
                  .replace('d="M0 0h24v24H0z"', '')
                  .replace(/width=".*?"/, 'width={size}')
                  .replace(/height=".*?"/, 'height={size}')
                  .replace('otherProps="..."', '{...otherProps}')
              : $(optimizedSVG)
                  .toString()
                  .replace('fill="#FFF"', 'fill={fgColor}')
                  .replace('stroke="#FFF"', 'stroke={fgColor}')
                  .replace(new RegExp(/ stroke=".*?"/, 'g'), ' stroke={bgColor}')
                  .replace(
                    new RegExp(/ fill="(?!#fff|none).*?"/, 'g'),
                    ' fill={bgColor}',
                  )
                  .replace('viewBox', '{...otherProps} viewBox') // tack on extra props next to viewBox attribute
                  .replace('d="M0 0h24v24H0z"', '')
                  .replace(/width=".*?"/, 'width={size}')
                  .replace(/height=".*?"/, 'height={size}')
                  .replace('otherProps="..."', '{...otherProps}')
          }
        )
  };
  `;
  
        const component = prettier.format(element, {
          singleQuote: true,
          trailingComma: 'es5',
          bracketSpacing: true,
          jsxBracketSameLine: true,
          parser: 'flow',
        });
  
        await fs.outputFile(location, component, 'utf-8');
        // Later when we call `const icons = await transpileIcons(iconPaths);` - `icons` will be an array of these objects:
        return {
          location,
          id,
          icon,
          fileName,
        };
      }),
    );
  }