Update SVG optimization workflow (#1215)

* Update optimize svg script

* Update tests

* Update error message

* Remove extra newline

* Update test scripts

* Optimize svgs

.github/workflows/ci.yml

@@ -27,3 +27,16 @@ jobs:
 
       - name: Lint
         run: npm run lint
+
+      - name: Optimize SVGs
+        run: |
+          npm run optimize-svgs
+          if git diff --quiet; then
+            echo "All SVGs are optimized ✔︎"
+          else
+            echo "The following SVGs are not optimized:"
+            git diff --name-only
+            echo
+            echo "Please run 'npm run optimize-svgs' and commit the changes"
+            exit 1
+          fi

bin/__tests__/__snapshots__/optimize-svg.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`optimizes SVG correctly 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"/><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"/></svg>"`;
+
+exports[`rejects when passed unparsable SVG string 1`] = `
+[Error: Error in parsing SVG: Unclosed root tag
+Line: 0
+Column: 10
+Char: ]
+`;

bin/__tests__/process-svg.test.js → bin/__tests__/optimize-svg.test.js

@@ -1,15 +1,15 @@
 /* eslint-env jest */
-import processSvg from '../process-svg';
+import optimizeSvg from '../optimize-svg';
 
-test('processes SVG correctly', () => {
+test('optimizes SVG correctly', () => {
   const SVG =
     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Title</title><line x1="23" y1="1" x2="1" y2="23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="1" y1="1" x2="23" y2="23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>';
 
-  expect(processSvg(SVG)).resolves.toMatchSnapshot();
+  expect(optimizeSvg(SVG)).resolves.toMatchSnapshot();
 });
 
 test('rejects when passed unparsable SVG string', () => {
   const UNPARSABLE_SVG = '<svg></svg';
 
-  expect(processSvg(UNPARSABLE_SVG)).rejects.toMatchSnapshot();
+  expect(optimizeSvg(UNPARSABLE_SVG)).rejects.toMatchSnapshot();
 });

bin/build.sh

@@ -1,8 +1,5 @@
 #!/bin/bash
 
-# Process SVG files
-# npx babel-node bin/process-svgs.js
-
 # Create dist directory
 npx rimraf dist
 mkdir dist

bin/process-svg.js → bin/optimize-svg.js

@@ -1,32 +1,24 @@
 import Svgo from 'svgo';
 import cheerio from 'cheerio';
-import { format } from 'prettier';
 
 import DEFAULT_ATTRS from '../src/default-attrs.json';
 
 /**
- * Process SVG string.
+ * Optimize SVG string.
  * @param {string} svg - An SVG string.
  * @returns {Promise<string>}
  */
-function processSvg(svg) {
-  return (
-    optimize(svg)
-      .then(setAttrs)
-      .then(format)
-      // remove semicolon inserted by prettier
-      // because prettier thinks it's formatting JSX not HTML
-      .then(svg => svg.replace(/;/g, ''))
-  );
+function optimizeSvg(svg) {
+  return svgo(svg).then(setAttrs);
 }
 
 /**
- * Optimize SVG with `svgo`.
+ * Run SVGO on SVG string.
  * @param {string} svg - An SVG string.
  * @returns {Promise<string>}
  */
-function optimize(svg) {
-  const svgo = new Svgo({
+function svgo(svg) {
+  const s = new Svgo({
     plugins: [
       { convertShapeToPath: false },
       { mergePaths: false },
@@ -36,7 +28,7 @@ function optimize(svg) {
   });
 
   return new Promise(resolve => {
-    svgo.optimize(svg, ({ data }) => resolve(data));
+    s.optimize(svg, ({ data }) => resolve(data));
   });
 }
 
@@ -55,4 +47,4 @@ function setAttrs(svg) {
   return $('body').html();
 }
 
-export default processSvg;
+export default optimizeSvg;

bin/process-svgs.js → bin/optimize-svgs.js

@@ -1,17 +1,17 @@
 import fs from 'fs';
 import path from 'path';
 
-import processSvg from './process-svg';
+import optimizeSvg from './optimize-svg';
 
 const IN_DIR = path.resolve(__dirname, '../icons');
 
-console.log(`Processing SVGs in ${IN_DIR}...`);
+console.log(`Optimizing SVGs in ${IN_DIR}...`);
 
 fs.readdirSync(IN_DIR)
   .filter(file => path.extname(file) === '.svg')
   .forEach(svgFile => {
     const svg = fs.readFileSync(path.join(IN_DIR, svgFile));
-    processSvg(svg).then(svg =>
+    optimizeSvg(svg).then(svg =>
       fs.writeFileSync(path.join(IN_DIR, svgFile), svg),
     );
   });