Revise SVG Handling (#951)

* feature: revise svg handling

* fix: remove duplicate svgo to prefer project config

Author: jryanconklin

.svgo.yml

@@ -19,7 +19,11 @@ plugins:
   - minifyStyles: true
   - moveElemsAttrsToGroup: true
   - moveGroupAttrsToElems: true
-  - removeAttrs: false
+  - removeAttrs:
+      attrs: 'fill'
+  - addAttributesToSVGElement:
+      attributes:
+        - fill: 'currentColor'
   - removeComments: true
   - removeDesc: true
   - removeDimensions: true

apps/pl-default/pattern-lab/_data/data.yml

@@ -13,7 +13,7 @@ paths:
   assets: '../../../assets'
   images: '../../../assets/images'
   fonts: '../../../assets/fonts'
-  svgs: '../../../assets/atomic/_patterns/01-atoms/svg/icons'
+  svgs: '@static/icons/svg'
 bodyClass: 'pl pl-loading'
 
 # Generic Starter Template Data

apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig

@@ -15,22 +15,22 @@
       <div class="w-10">
         {% include '@atoms/svg/_svg.twig' with {
           svg: {
-            path: '@atoms/svg/icons/person.svg'
+            path: paths.svgs ~ '/person.svg'
           }
         } %}
       </div>
       <!-- Embed: Width is still set via a wrapping div, and so is color. Note: set color via a TEXT color class, due to embedded SVGs defaulting to fill: currentColor; -->
       <div class="w-6 text-blue-500">
         {% include '@atoms/svg/_svg.twig' with {
           svg: {
-            path: '@atoms/svg/icons/close.svg'
+            path: paths.svgs ~ '/close.svg'
           }
         } %}
       </div>
       <!-- Embed: Leveraging additional classes being passed directly to the SVG component, no need for an extra wrapping <div> -->
       {% include '@atoms/svg/_svg.twig' with {
         svg: {
-          path: '@atoms/svg/icons/search.svg'
+          path: paths.svgs ~ '/search.svg'
         },
         svg_classes: ['text-red-500', 'w-4']
       } %}
@@ -78,7 +78,7 @@
       If you need to reference these SVGs as src for an img tag.
     </p>
     <!-- Reference the special paths.svg variable to set the src of an <img/> with the path to an SVG -->
-    <img class="w-10" src="{{ paths.svgs ~ '/person.svg' }}" />
+    <img class="w-10" src="{{ paths.images ~ '/person.svg' }}" />
 
     <h1 class="mt-2">
       CSS classes

apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml

@@ -3,7 +3,7 @@ svg_demo_block:
   content:
     lead: 'Implements our SVG and SVG Icons.'
     summary:
-      'Store your SVG files in the icons/ subdirectory to have them made
-      available via the <code>_svg.twig</code>. <strong>See this
-      <code>svgs.twig</code> demo file code comments for implmentation details
-      and examples.</strong>'
+      'Store your SVG files in the <code>source/default/static/icons/svg/</code>
+      subdirectory to have them made available via the <code>_svg.twig</code>.
+      <strong>See this <code>svgs.twig</code> demo file code comments for
+      implmentation details and examples.</strong>'

apps/pl-default/patternlab-config.json

@@ -21,9 +21,30 @@
     "tools-docs": false
   },
   "ishViewportRange": {
-    "s": [240, 500, 240, 500, 240, 500],
-    "m": [500, 800, 500, 800, 500, 800],
-    "l": [800, 2600, 800, 2600, 800, 2600]
+    "s": [
+      240,
+      500,
+      240,
+      500,
+      240,
+      500
+    ],
+    "m": [
+      500,
+      800,
+      500,
+      800,
+      500,
+      800
+    ],
+    "l": [
+      800,
+      2600,
+      800,
+      2600,
+      800,
+      2600
+    ]
   },
   "logLevel": "error",
   "outputFileSuffixes": {
@@ -94,58 +115,96 @@
         {
           "id": "uikit",
           "recursive": true,
-          "paths": ["./node_modules/@pattern-lab/uikit-workshop/views-twig"]
+          "paths": [
+            "./node_modules/@pattern-lab/uikit-workshop/views-twig"
+          ]
+        },
+        {
+          "id": "static",
+          "recursive": true,
+          "paths": [
+            "./source/default/static"
+          ]
+        },
+        {
+          "id": "lib",
+          "recursive": true,
+          "paths": [
+            "./source/default/lib"
+          ]
         },
         {
           "id": "protons",
           "recursive": true,
-          "paths": ["./source/default/_patterns/00-protons"]
+          "paths": [
+            "./source/default/_patterns/00-protons"
+          ]
         },
         {
           "id": "atoms",
           "recursive": true,
-          "paths": ["source/default/_patterns/01-atoms"]
+          "paths": [
+            "source/default/_patterns/01-atoms"
+          ]
         },
         {
           "id": "molecules",
           "recursive": true,
-          "paths": ["./source/default/_patterns/02-molecules"]
+          "paths": [
+            "./source/default/_patterns/02-molecules"
+          ]
         },
         {
           "id": "organisms",
           "recursive": true,
-          "paths": ["./source/default/_patterns/03-organisms"]
+          "paths": [
+            "./source/default/_patterns/03-organisms"
+          ]
         },
         {
           "id": "templates",
           "recursive": true,
-          "paths": ["./source/default/_patterns/04-templates"]
+          "paths": [
+            "./source/default/_patterns/04-templates"
+          ]
         },
         {
           "id": "pages",
           "recursive": true,
-          "paths": ["./source/default/_patterns/05-pages"]
+          "paths": [
+            "./source/default/_patterns/05-pages"
+          ]
         },
         {
           "id": "demo",
           "recursive": true,
-          "paths": ["./apps/pl-default/pattern-lab/_patterns/00-protons-demo"]
+          "paths": [
+            "./apps/pl-default/pattern-lab/_patterns/00-protons-demo"
+          ]
         },
         {
           "id": "demos",
           "recursive": true,
-          "paths": ["./apps/pl-default/pattern-lab/_patterns"]
+          "paths": [
+            "./apps/pl-default/pattern-lab/_patterns"
+          ]
         },
         {
           "id": "macros",
           "recursive": true,
-          "paths": ["./source/default/_macros"]
+          "paths": [
+            "./source/default/_macros"
+          ]
         }
       ],
       "alterTwigEnv": [
         {
           "file": "./apps/pl-default/pattern-lab/alter-twig.php",
-          "functions": ["addFilters", "addFunctions", "addDebug"]
+          "functions": [
+            "addFilters",
+            "addFunctions",
+            "addDebug"
+          ]
         }
       ]
     }

package.json

@@ -30,7 +30,7 @@
     "lint": "npm run lint:js; npm run lint:css;",
     "fmt:js": "npm run lint:js -- --fix",
     "fmt:css": "npm run lint:css -- --fix && prettier --write '**/*.css'",
-    "fmt:svg": "svgo -f ./source/default/_patterns/01-atoms/svg/icons --config=./.svgo.yml",
+    "fmt:svg": "svgo -f ./source/default/static/icons/svg --config=./.svgo.yml",
     "fmt": "npm run fmt:svg; npm run fmt:js; npm run fmt:css; prettier --write .",
     "test:backstop:ref": "node tools/tests/vrt/backstop-example-reference.js",
     "test:backstop:test": "node tools/tests/vrt/backstop-example-test.js",

source/default/_patterns/01-atoms/svg/README.md

@@ -8,9 +8,10 @@ by running `npm run fmt:svg` or `npm run fmt`.
 
 ## Adding Icons SVG
 
-To add an Icon SVG to the system, simply add it to `@atoms/svg/icons/` directory
-and run the format command. This format step is **destructive**, so be aware of
-using source control to revert unintended changes.
+To add an Icon SVG to the system, simply add it to
+`source/default/static/icons/svg/` directory and run the format command. This
+format step is **destructive**, so be aware of using source control to revert
+unintended changes.
 
 ## Adjusting Formatting Configuration
 

source/default/_patterns/01-atoms/svg/_svg--embed.twig

@@ -5,13 +5,13 @@
  *
  * Available variables for svg--embed:
  *  - svg.path [string]: Atomic path to SVG file.
- *      Example: '@atoms/svg/icons/person.svg'
+ *      Example: paths.svgs ~ '/search.svg'
  */
 #}
 
 {% set svg =
   {
-    path: '@atoms/svg/icons/person.svg'
+    path: paths.svgs ~ '/search.svg'
   }|merge(svg)
 %}
 

source/default/_patterns/01-atoms/svg/icons/README.md

@@ -19,7 +19,7 @@ import './_svg--embed.twig';
 import './_svg--sprite.twig';
 
 // Import all SVGs into assets/images for reference in CSS/JS bundle
-require.context('./icons', false, /\.svg$/);
+require.context('static/icons/svg', false, /\.svg$/);
 
 // Enable Fontawesome immediately, comment this out if not using FontAwesome
 fontawesome();

source/default/_patterns/01-atoms/svg/icons/menu.svg

@@ -0,0 +1,17 @@
+# SVG Pattern
+
+This SVG directory is a special static assets directory in Particle that is
+designed to allow us to include SVG as CSS or inline. Furthermore, this pattern
+is setup to be optimized as a developer step via `npm run fmt:svg` or
+`npm run fmt`.
+
+## Adding SVG
+
+To add an SVG to the system, simply add it to `/source/urban/static/icons/svg/`
+directory and run the format command. This step is **destructive**, so be aware
+of using source control to revert unintended changes.
+
+## Adjusting Formatting Configuration
+
+This pattern uses [SVGO](https://github.com/svg/svgo) to format and optimize SVG
+files. You can adjust the configuration at Particle's root in `/.svgo.yml`.

source/default/_patterns/01-atoms/svg/index.js

@@ -8,9 +8,6 @@ const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
 
 const namespaces = require('./namespaces');
 
-// Constants: root
-const { ASSETS_ATOMIC_FOLDER } = require('../../particle.root.config');
-
 module.exports = {
   module: {
     rules: [
@@ -31,27 +28,17 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.svg$/,
-        loader: 'file-loader',
-        options: {
-          name: '[path][name].[ext]',
-          outputPath: ASSETS_ATOMIC_FOLDER,
-          context: path.resolve(__dirname),
-          emit: true,
-        },
-      },
     ],
   },
   plugins: [
     // Sprite system options
     new SVGSpritemapPlugin(
-      path.resolve(namespaces.atoms, 'svg/icons/**/*.svg'),
+      path.resolve(namespaces.static, 'icons/svg/**/*.svg'),
       {
         output: {
           filename: 'images/spritemap.svg',
           svg4everybody: true,
-          svgo: true,
+          svgo: false,
         },
         styles: {
           filename: '~svg-icons.css',

source/default/static/icons/svg/README.md

@@ -89,7 +89,7 @@ module.exports = {
         },
       },
       {
-        test: /\.(png|jpg|gif)$/,
+        test: /\.(png|jpg|gif|svg)$/,
         loader: 'file-loader',
         options: {
           name: 'images/[name].[ext]?[hash]',