Skip to content

Commit eaf68b2

Browse files
jryanconklinjryanconklin
authored
Revise SVG Handling (#951)
* feature: revise svg handling * fix: remove duplicate svgo to prefer project config
1 parent a1482ac commit eaf68b2

22 files changed

Lines changed: 125 additions & 73 deletions

File tree

‎.svgo.yml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@ plugins:
1919
- minifyStyles: true
2020
- moveElemsAttrsToGroup: true
2121
- moveGroupAttrsToElems: true
22-
- removeAttrs: false
22+
- removeAttrs:
23+
attrs: 'fill'
24+
- addAttributesToSVGElement:
25+
attributes:
26+
- fill: 'currentColor'
2327
- removeComments: true
2428
- removeDesc: true
2529
- removeDimensions: true

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ paths:
1313
assets: '../../../assets'
1414
images: '../../../assets/images'
1515
fonts: '../../../assets/fonts'
16-
svgs: '../../../assets/atomic/_patterns/01-atoms/svg/icons'
16+
svgs: '@static/icons/svg'
1717
bodyClass: 'pl pl-loading'
1818

1919
# Generic Starter Template Data

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,22 @@
1515
<div class="w-10">
1616
{% include '@atoms/svg/_svg.twig' with {
1717
svg: {
18-
path: '@atoms/svg/icons/person.svg'
18+
path: paths.svgs ~ '/person.svg'
1919
}
2020
} %}
2121
</div>
2222
<!-- 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; -->
2323
<div class="w-6 text-blue-500">
2424
{% include '@atoms/svg/_svg.twig' with {
2525
svg: {
26-
path: '@atoms/svg/icons/close.svg'
26+
path: paths.svgs ~ '/close.svg'
2727
}
2828
} %}
2929
</div>
3030
<!-- Embed: Leveraging additional classes being passed directly to the SVG component, no need for an extra wrapping <div> -->
3131
{% include '@atoms/svg/_svg.twig' with {
3232
svg: {
33-
path: '@atoms/svg/icons/search.svg'
33+
path: paths.svgs ~ '/search.svg'
3434
},
3535
svg_classes: ['text-red-500', 'w-4']
3636
} %}
@@ -78,7 +78,7 @@
7878
If you need to reference these SVGs as src for an img tag.
7979
</p>
8080
<!-- Reference the special paths.svg variable to set the src of an <img/> with the path to an SVG -->
81-
<img class="w-10" src="{{ paths.svgs ~ '/person.svg' }}" />
81+
<img class="w-10" src="{{ paths.images ~ '/person.svg' }}" />
8282

8383
<h1 class="mt-2">
8484
CSS classes

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ svg_demo_block:
33
content:
44
lead: 'Implements our SVG and SVG Icons.'
55
summary:
6-
'Store your SVG files in the icons/ subdirectory to have them made
7-
available via the <code>_svg.twig</code>. <strong>See this
8-
<code>svgs.twig</code> demo file code comments for implmentation details
9-
and examples.</strong>'
6+
'Store your SVG files in the <code>source/default/static/icons/svg/</code>
7+
subdirectory to have them made available via the <code>_svg.twig</code>.
8+
<strong>See this <code>svgs.twig</code> demo file code comments for
9+
implmentation details and examples.</strong>'

‎apps/pl-default/patternlab-config.json‎

Lines changed: 73 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,30 @@
2121
"tools-docs": false
2222
},
2323
"ishViewportRange": {
24-
"s": [240, 500, 240, 500, 240, 500],
25-
"m": [500, 800, 500, 800, 500, 800],
26-
"l": [800, 2600, 800, 2600, 800, 2600]
24+
"s": [
25+
240,
26+
500,
27+
240,
28+
500,
29+
240,
30+
500
31+
],
32+
"m": [
33+
500,
34+
800,
35+
500,
36+
800,
37+
500,
38+
800
39+
],
40+
"l": [
41+
800,
42+
2600,
43+
800,
44+
2600,
45+
800,
46+
2600
47+
]
2748
},
2849
"logLevel": "error",
2950
"outputFileSuffixes": {
@@ -94,58 +115,96 @@
94115
{
95116
"id": "uikit",
96117
"recursive": true,
97-
"paths": ["./node_modules/@pattern-lab/uikit-workshop/views-twig"]
118+
"paths": [
119+
"./node_modules/@pattern-lab/uikit-workshop/views-twig"
120+
]
121+
},
122+
{
123+
"id": "static",
124+
"recursive": true,
125+
"paths": [
126+
"./source/default/static"
127+
]
128+
},
129+
{
130+
"id": "lib",
131+
"recursive": true,
132+
"paths": [
133+
"./source/default/lib"
134+
]
98135
},
99136
{
100137
"id": "protons",
101138
"recursive": true,
102-
"paths": ["./source/default/_patterns/00-protons"]
139+
"paths": [
140+
"./source/default/_patterns/00-protons"
141+
]
103142
},
104143
{
105144
"id": "atoms",
106145
"recursive": true,
107-
"paths": ["source/default/_patterns/01-atoms"]
146+
"paths": [
147+
"source/default/_patterns/01-atoms"
148+
]
108149
},
109150
{
110151
"id": "molecules",
111152
"recursive": true,
112-
"paths": ["./source/default/_patterns/02-molecules"]
153+
"paths": [
154+
"./source/default/_patterns/02-molecules"
155+
]
113156
},
114157
{
115158
"id": "organisms",
116159
"recursive": true,
117-
"paths": ["./source/default/_patterns/03-organisms"]
160+
"paths": [
161+
"./source/default/_patterns/03-organisms"
162+
]
118163
},
119164
{
120165
"id": "templates",
121166
"recursive": true,
122-
"paths": ["./source/default/_patterns/04-templates"]
167+
"paths": [
168+
"./source/default/_patterns/04-templates"
169+
]
123170
},
124171
{
125172
"id": "pages",
126173
"recursive": true,
127-
"paths": ["./source/default/_patterns/05-pages"]
174+
"paths": [
175+
"./source/default/_patterns/05-pages"
176+
]
128177
},
129178
{
130179
"id": "demo",
131180
"recursive": true,
132-
"paths": ["./apps/pl-default/pattern-lab/_patterns/00-protons-demo"]
181+
"paths": [
182+
"./apps/pl-default/pattern-lab/_patterns/00-protons-demo"
183+
]
133184
},
134185
{
135186
"id": "demos",
136187
"recursive": true,
137-
"paths": ["./apps/pl-default/pattern-lab/_patterns"]
188+
"paths": [
189+
"./apps/pl-default/pattern-lab/_patterns"
190+
]
138191
},
139192
{
140193
"id": "macros",
141194
"recursive": true,
142-
"paths": ["./source/default/_macros"]
195+
"paths": [
196+
"./source/default/_macros"
197+
]
143198
}
144199
],
145200
"alterTwigEnv": [
146201
{
147202
"file": "./apps/pl-default/pattern-lab/alter-twig.php",
148-
"functions": ["addFilters", "addFunctions", "addDebug"]
203+
"functions": [
204+
"addFilters",
205+
"addFunctions",
206+
"addDebug"
207+
]
149208
}
150209
]
151210
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"lint": "npm run lint:js; npm run lint:css;",
3131
"fmt:js": "npm run lint:js -- --fix",
3232
"fmt:css": "npm run lint:css -- --fix && prettier --write '**/*.css'",
33-
"fmt:svg": "svgo -f ./source/default/_patterns/01-atoms/svg/icons --config=./.svgo.yml",
33+
"fmt:svg": "svgo -f ./source/default/static/icons/svg --config=./.svgo.yml",
3434
"fmt": "npm run fmt:svg; npm run fmt:js; npm run fmt:css; prettier --write .",
3535
"test:backstop:ref": "node tools/tests/vrt/backstop-example-reference.js",
3636
"test:backstop:test": "node tools/tests/vrt/backstop-example-test.js",

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ by running `npm run fmt:svg` or `npm run fmt`.
88

99
## Adding Icons SVG
1010

11-
To add an Icon SVG to the system, simply add it to `@atoms/svg/icons/` directory
12-
and run the format command. This format step is **destructive**, so be aware of
13-
using source control to revert unintended changes.
11+
To add an Icon SVG to the system, simply add it to
12+
`source/default/static/icons/svg/` directory and run the format command. This
13+
format step is **destructive**, so be aware of using source control to revert
14+
unintended changes.
1415

1516
## Adjusting Formatting Configuration
1617

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
*
66
* Available variables for svg--embed:
77
* - svg.path [string]: Atomic path to SVG file.
8-
* Example: '@atoms/svg/icons/person.svg'
8+
* Example: paths.svgs ~ '/search.svg'
99
*/
1010
#}
1111

1212
{% set svg =
1313
{
14-
path: '@atoms/svg/icons/person.svg'
14+
path: paths.svgs ~ '/search.svg'
1515
}|merge(svg)
1616
%}
1717

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

Lines changed: 0 additions & 16 deletions
This file was deleted.

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

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)