From eaf68b274d57c3ab0d0ac8704100ccf8253206f0 Mon Sep 17 00:00:00 2001 From: "J. Ryan Conklin" Date: Wed, 14 Oct 2020 15:32:46 -0700 Subject: [PATCH] Revise SVG Handling (#951) * feature: revise svg handling * fix: remove duplicate svgo to prefer project config --- .svgo.yml | 6 +- apps/pl-default/pattern-lab/_data/data.yml | 2 +- .../_patterns/01-atoms-demo/svg/svgs.twig | 8 +- .../_patterns/01-atoms-demo/svg/svgs.yml | 8 +- apps/pl-default/patternlab-config.json | 87 ++++++++++++++++--- package.json | 2 +- .../default/_patterns/01-atoms/svg/README.md | 7 +- .../_patterns/01-atoms/svg/_svg--embed.twig | 4 +- .../_patterns/01-atoms/svg/icons/README.md | 16 ---- .../_patterns/01-atoms/svg/icons/menu.svg | 3 - .../default/_patterns/01-atoms/svg/index.js | 2 +- source/default/static/icons/svg/README.md | 17 ++++ .../icons/svg}/chevron-down.svg | 2 +- .../icons/svg}/chevron-left.svg | 2 +- .../icons/svg}/chevron-right.svg | 2 +- .../icons => static/icons/svg}/chevron-up.svg | 2 +- .../svg/icons => static/icons/svg}/close.svg | 2 +- source/default/static/icons/svg/menu.svg | 3 + .../svg/icons => static/icons/svg}/person.svg | 2 +- .../svg/icons => static/icons/svg}/search.svg | 2 +- source/default/webpack.config.js | 17 +--- webpack.particle.js | 2 +- 22 files changed, 125 insertions(+), 73 deletions(-) delete mode 100644 source/default/_patterns/01-atoms/svg/icons/README.md delete mode 100644 source/default/_patterns/01-atoms/svg/icons/menu.svg create mode 100644 source/default/static/icons/svg/README.md rename source/default/{_patterns/01-atoms/svg/icons => static/icons/svg}/chevron-down.svg (52%) rename source/default/{_patterns/01-atoms/svg/icons => static/icons/svg}/chevron-left.svg (53%) rename source/default/{_patterns/01-atoms/svg/icons => static/icons/svg}/chevron-right.svg (53%) rename source/default/{_patterns/01-atoms/svg/icons => static/icons/svg}/chevron-up.svg (51%) rename source/default/{_patterns/01-atoms/svg/icons => static/icons/svg}/close.svg (59%) create mode 100644 source/default/static/icons/svg/menu.svg rename source/default/{_patterns/01-atoms/svg/icons => static/icons/svg}/person.svg (78%) rename source/default/{_patterns/01-atoms/svg/icons => static/icons/svg}/search.svg (84%) diff --git a/.svgo.yml b/.svgo.yml index 3ed9e070ca..7d76757b91 100644 --- a/.svgo.yml +++ b/.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 diff --git a/apps/pl-default/pattern-lab/_data/data.yml b/apps/pl-default/pattern-lab/_data/data.yml index baf6a9de8a..a66fae2c78 100644 --- a/apps/pl-default/pattern-lab/_data/data.yml +++ b/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 diff --git a/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig index f102ee6656..09b05b18d6 100644 --- a/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig +++ b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig @@ -15,7 +15,7 @@
{% include '@atoms/svg/_svg.twig' with { svg: { - path: '@atoms/svg/icons/person.svg' + path: paths.svgs ~ '/person.svg' } } %}
@@ -23,14 +23,14 @@
{% include '@atoms/svg/_svg.twig' with { svg: { - path: '@atoms/svg/icons/close.svg' + path: paths.svgs ~ '/close.svg' } } %}
{% 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.

- +

CSS classes diff --git a/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml index f979fbdc9f..a581a5e955 100644 --- a/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml +++ b/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 _svg.twig. See this - svgs.twig demo file code comments for implmentation details - and examples.' + 'Store your SVG files in the source/default/static/icons/svg/ + subdirectory to have them made available via the _svg.twig. + See this svgs.twig demo file code comments for + implmentation details and examples.' diff --git a/apps/pl-default/patternlab-config.json b/apps/pl-default/patternlab-config.json index e86361ba83..43a25d593d 100644 --- a/apps/pl-default/patternlab-config.json +++ b/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" + ] } ] } diff --git a/package.json b/package.json index 546a1b7870..7cd6be4f99 100644 --- a/package.json +++ b/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", diff --git a/source/default/_patterns/01-atoms/svg/README.md b/source/default/_patterns/01-atoms/svg/README.md index d3a4feeec1..53c0df792e 100644 --- a/source/default/_patterns/01-atoms/svg/README.md +++ b/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 diff --git a/source/default/_patterns/01-atoms/svg/_svg--embed.twig b/source/default/_patterns/01-atoms/svg/_svg--embed.twig index 8aaf162cc8..86af18b7d9 100644 --- a/source/default/_patterns/01-atoms/svg/_svg--embed.twig +++ b/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) %} diff --git a/source/default/_patterns/01-atoms/svg/icons/README.md b/source/default/_patterns/01-atoms/svg/icons/README.md deleted file mode 100644 index b0c356050d..0000000000 --- a/source/default/_patterns/01-atoms/svg/icons/README.md +++ /dev/null @@ -1,16 +0,0 @@ -# SVG Pattern - -The SVG is a special pattern 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 `@atoms/svg/icons/` 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`. diff --git a/source/default/_patterns/01-atoms/svg/icons/menu.svg b/source/default/_patterns/01-atoms/svg/icons/menu.svg deleted file mode 100644 index d701054c62..0000000000 --- a/source/default/_patterns/01-atoms/svg/icons/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/source/default/_patterns/01-atoms/svg/index.js b/source/default/_patterns/01-atoms/svg/index.js index a687dc6fa9..037c589b15 100644 --- a/source/default/_patterns/01-atoms/svg/index.js +++ b/source/default/_patterns/01-atoms/svg/index.js @@ -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(); diff --git a/source/default/static/icons/svg/README.md b/source/default/static/icons/svg/README.md new file mode 100644 index 0000000000..83f37ddb29 --- /dev/null +++ b/source/default/static/icons/svg/README.md @@ -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`. diff --git a/source/default/_patterns/01-atoms/svg/icons/chevron-down.svg b/source/default/static/icons/svg/chevron-down.svg similarity index 52% rename from source/default/_patterns/01-atoms/svg/icons/chevron-down.svg rename to source/default/static/icons/svg/chevron-down.svg index 51e9e65dbc..64cbdb53d9 100644 --- a/source/default/_patterns/01-atoms/svg/icons/chevron-down.svg +++ b/source/default/static/icons/svg/chevron-down.svg @@ -1,3 +1,3 @@ - + diff --git a/source/default/_patterns/01-atoms/svg/icons/chevron-left.svg b/source/default/static/icons/svg/chevron-left.svg similarity index 53% rename from source/default/_patterns/01-atoms/svg/icons/chevron-left.svg rename to source/default/static/icons/svg/chevron-left.svg index 1e24512565..c4274440c5 100644 --- a/source/default/_patterns/01-atoms/svg/icons/chevron-left.svg +++ b/source/default/static/icons/svg/chevron-left.svg @@ -1,3 +1,3 @@ - + diff --git a/source/default/_patterns/01-atoms/svg/icons/chevron-right.svg b/source/default/static/icons/svg/chevron-right.svg similarity index 53% rename from source/default/_patterns/01-atoms/svg/icons/chevron-right.svg rename to source/default/static/icons/svg/chevron-right.svg index 10f1e58df2..2f014028fa 100644 --- a/source/default/_patterns/01-atoms/svg/icons/chevron-right.svg +++ b/source/default/static/icons/svg/chevron-right.svg @@ -1,3 +1,3 @@ - + diff --git a/source/default/_patterns/01-atoms/svg/icons/chevron-up.svg b/source/default/static/icons/svg/chevron-up.svg similarity index 51% rename from source/default/_patterns/01-atoms/svg/icons/chevron-up.svg rename to source/default/static/icons/svg/chevron-up.svg index 6b6f3a7b1c..72db24ffe5 100644 --- a/source/default/_patterns/01-atoms/svg/icons/chevron-up.svg +++ b/source/default/static/icons/svg/chevron-up.svg @@ -1,3 +1,3 @@ - + diff --git a/source/default/_patterns/01-atoms/svg/icons/close.svg b/source/default/static/icons/svg/close.svg similarity index 59% rename from source/default/_patterns/01-atoms/svg/icons/close.svg rename to source/default/static/icons/svg/close.svg index c7b5a4256d..703f30a876 100644 --- a/source/default/_patterns/01-atoms/svg/icons/close.svg +++ b/source/default/static/icons/svg/close.svg @@ -1,3 +1,3 @@ - + diff --git a/source/default/static/icons/svg/menu.svg b/source/default/static/icons/svg/menu.svg new file mode 100644 index 0000000000..1f42c785ae --- /dev/null +++ b/source/default/static/icons/svg/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/default/_patterns/01-atoms/svg/icons/person.svg b/source/default/static/icons/svg/person.svg similarity index 78% rename from source/default/_patterns/01-atoms/svg/icons/person.svg rename to source/default/static/icons/svg/person.svg index 1f1b2de60f..49cdd2a0d4 100644 --- a/source/default/_patterns/01-atoms/svg/icons/person.svg +++ b/source/default/static/icons/svg/person.svg @@ -1,3 +1,3 @@ - + diff --git a/source/default/_patterns/01-atoms/svg/icons/search.svg b/source/default/static/icons/svg/search.svg similarity index 84% rename from source/default/_patterns/01-atoms/svg/icons/search.svg rename to source/default/static/icons/svg/search.svg index 2e4066a44c..1452930190 100644 --- a/source/default/_patterns/01-atoms/svg/icons/search.svg +++ b/source/default/static/icons/svg/search.svg @@ -1,3 +1,3 @@ - + diff --git a/source/default/webpack.config.js b/source/default/webpack.config.js index 32aa4eb78b..3bf4911000 100644 --- a/source/default/webpack.config.js +++ b/source/default/webpack.config.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', diff --git a/webpack.particle.js b/webpack.particle.js index 97239f3a67..337fbefbbe 100644 --- a/webpack.particle.js +++ b/webpack.particle.js @@ -89,7 +89,7 @@ module.exports = { }, }, { - test: /\.(png|jpg|gif)$/, + test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: 'images/[name].[ext]?[hash]',