chore: SVG optimization no longer breaks outline icons (#1313)

Author: liamdebeasi

.github/CONTRIBUTING.md

@@ -50,7 +50,7 @@ Please see our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for informati
 
 1. Run `npm start` from the root directory to start a local version of the icon test.
 2. Modify the icon test as needed in the `index.html` file.
-
+3. If you are modifying icons, you can run `npm run build.files` to re-run the SVG optimization script to verify there are no changes after optimizing the SVG.
 
 <!-- #### Building Changes
 

scripts/build.ts

@@ -51,6 +51,16 @@ async function optimizeSvgs(srcSvgData: SvgData[]) {
             if (!Array.isArray(params.attrs)) {
               params.attrs = [params.attrs];
             }
+            
+            /**
+             * All host SVG elements must have
+             * the ionicons class otherwise styles
+             * will not apply.
+             */
+            if (item.elem === 'svg') {
+              item.class.add('ionicon');
+            }
+            
             if (item.isElem()) {
               item.eachAttr((attr) => {
                 if (attr.name === 'fill') {
@@ -165,14 +175,8 @@ async function optimizeSvg(
   const srcSvgContent = await fs.readFile(svgData.srcFilePath, 'utf8');
 
   const optimizedSvg = await optimizePass.optimize(srcSvgContent, { path: svgData.srcFilePath });
-
-  const optimizedCode = optimizedSvg.data.replace(
-    /<svg (.*?)>/,
-    `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">`,
-  );
-
-  const webComponentSvg = await webComponentPass.optimize(optimizedCode, { path: svgData.srcFilePath });
-  const sourceSvg = await sourcePass.optimize(optimizedCode, { path: svgData.srcFilePath });
+  const webComponentSvg = await webComponentPass.optimize(optimizedSvg.data, { path: svgData.srcFilePath });
+  const sourceSvg = await sourcePass.optimize(optimizedSvg.data, { path: svgData.srcFilePath });
 
   svgData.optimizedSvgContent = webComponentSvg.data;