feat: add 16px icons and update all svgs (#91)

* chore(scripts): print names of icon files that have invalid width/height value

When we copy over svgs from Figma, it sometimes happens that those files have invalid height/width
applied to svg element. By printing a list of invalid icons, we are increasing our chances of
spotting those tiny errors.

* feat: update remaining icons and add missing 16px sizes

scripts/output/react.js

@@ -5,17 +5,19 @@ import { getSVGs, getDirname } from '../util/helpers.js'
 import chalk from 'chalk'
 import defaultIconDescriptions from '../../default-icon-descriptions.js'
 
-const __dirname = getDirname(import.meta.url)
-const icons = []
-const basepath = joinPath(__dirname, '../../react/')
-mkdirSync(basepath, { recursive: true })
+const __dirname = getDirname(import.meta.url);
+const icons = [];
+const basepath = joinPath(__dirname, '../../react/');
+mkdirSync(basepath, { recursive: true });
+const invalidIconSizes = [];
 
 // Create React Icon
 getSVGs().forEach(({ svg, filename, exportName, name }) => {
   // Handle i18n of icon title
   const iconNameCamelCase = exportName.replace('Icon', '').replace(/\d+/g, '');
   const titleMessage = defaultIconDescriptions[iconNameCamelCase.toLowerCase()];
-  const attrs = Array.from(svg.attrs).map(attr => attr.name + `: ` + `'` + attr.value + `'`)
+  const attrs = Array.from(svg.attrs).map((attr) => attr.name + `: ` + `'` + attr.value + `'`);
+  validateSize(svg.attrs, filename);
   const { message, id, comment } = titleMessage || {};
   const titleHtml = "<title>${title}</title>";
   const output = [
@@ -41,7 +43,21 @@ console.log(`${chalk.cyan('react')}: Processing ${chalk.yellow(iconNames.length)
 console.log(`${chalk.cyan('react')}: Wrote ${chalk.yellow(icons.length)} icon files (different sizes for the same icon)`)
 
 // Create index file
-const indexFile = icons.map(({ filename }) => `export * from './${filename}'`) .join("\n");
-const indexFilename = joinPath(basepath, 'index.js')
-writeFileSync(indexFilename, `${indexFile}`, 'utf-8')
-console.log(`${chalk.cyan('react')}: Wrote ${chalk.yellow('index')} file`)
+const indexFile = icons.map(({ filename }) => `export * from './${filename}'`).join('\n');
+const indexFilename = joinPath(basepath, 'index.js');
+writeFileSync(indexFilename, `${indexFile}`, 'utf-8');
+console.log(`${chalk.cyan('react')}: Wrote ${chalk.yellow('index')} file`);
+console.log(`${chalk.red(`Icons with invalid width or height attribute:`)}\n${invalidIconSizes.join('\n')}`);
+
+function validateSize(svgAttrs, filename) {
+  const attrs = {};
+  Array.from(svgAttrs).forEach((attr) => {
+    attrs[attr.name] = attr.value;
+  });
+  const { width, height } = attrs;
+  const sizeFromFilename = filename.match(/\d+(\.\d+)?/g)[0];
+
+  if (sizeFromFilename !== width || ![16, 24, 32, 42, 28, 48, 56].includes(Number(height))) {
+    invalidIconSizes.push(filename);
+  }
+}