svg_sprite 0.2.3 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/.rubocop.yml +22 -0
- data/Gemfile +3 -1
- data/README.md +91 -90
- data/Rakefile +3 -1
- data/bin/console +1 -0
- data/examples/images/doc-fill.svg +3 -0
- data/examples/images/doc.svg +3 -0
- data/examples/images/trash-fill.svg +3 -0
- data/examples/images/trash.svg +3 -0
- data/examples/index.html +94 -15
- data/examples/sprite/current-color.css +26 -0
- data/examples/sprite/current-color.svg +16 -0
- data/examples/sprite/original.css +26 -0
- data/examples/sprite/original.svg +16 -0
- data/examples/sprite/remove.css +26 -0
- data/examples/sprite/remove.svg +16 -0
- data/exe/svg_sprite +2 -0
- data/lib/svg_sprite.rb +122 -22
- data/lib/svg_sprite/cli.rb +44 -28
- data/lib/svg_sprite/svg.rb +40 -52
- data/lib/svg_sprite/version.rb +4 -2
- data/svg_sprite.gemspec +11 -5
- metadata +60 -35
- data/examples/README.md +0 -19
- data/examples/source/a/blue-square.svg +0 -10
- data/examples/source/a/orange-square.svg +0 -10
- data/examples/source/b/green-square.svg +0 -10
- data/examples/source/b/yellow-square.svg +0 -10
- data/examples/source/scss.scss +0 -13
- data/lib/svg_sprite/source.rb +0 -17
- data/lib/svg_sprite/sprite.rb +0 -13
- data/lib/svg_sprite/template.rb +0 -6
- data/lib/svg_sprite/template/css.erb +0 -12
- data/lib/svg_sprite/template/css.rb +0 -13
- data/lib/svg_sprite/template/scss.erb +0 -33
- data/lib/svg_sprite/template/scss.rb +0 -19
@@ -0,0 +1,16 @@
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
2
|
+
<defs>
|
3
|
+
<symbol width="42" height="52" viewBox="0 0 42 52" id="doc-fill">
|
4
|
+
<path fill="currentColor" d="M33.118125,51.6953125 C38.2978125,51.6953125 41.0634375,48.90625 41.0634375,43.703125 L41.0634375,22.984375 L23.0165625,22.984375 C20.13375,22.984375 18.7275,21.578125 18.7275,18.71875 L18.7275,0.5078125 L8.086875,0.5078125 C2.9071875,0.5078125 0.1415625,3.3203125 0.1415625,8.5234375 L0.1415625,43.703125 C0.1415625,48.9296875 2.9071875,51.6953125 8.086875,51.6953125 L33.118125,51.6953125 Z M40.8290625,19.375 C40.711875,18.25 39.8446875,17.1484375 38.555625,15.8359375 L25.8525,2.96875 C24.6103125,1.7265625 23.4853125,0.859375 22.3603125,0.7421875 L22.3603125,17.96875 C22.3603125,18.90625 22.8290625,19.375 23.7665625,19.375 L40.8290625,19.375 Z"/>
|
5
|
+
</symbol>
|
6
|
+
<symbol width="42" height="52" viewBox="0 0 42 52" id="doc">
|
7
|
+
<path fill="currentColor" d="M33.118125,51.6953125 C38.2978125,51.6953125 41.0634375,48.90625 41.0634375,43.703125 L41.0634375,22.4453125 C41.0634375,18.9765625 40.57125,17.3125 38.3915625,15.0859375 L26.649375,3.1796875 C24.5165625,1.0234375 22.7353125,0.5078125 19.5478125,0.5078125 L8.086875,0.5078125 C2.9071875,0.5078125 0.1415625,3.3203125 0.1415625,8.5234375 L0.1415625,43.703125 C0.1415625,48.9296875 2.9071875,51.6953125 8.086875,51.6953125 L33.118125,51.6953125 Z M32.555625,46.328125 L8.649375,46.328125 C6.5165625,46.328125 5.50875,45.25 5.50875,43.2109375 L5.50875,8.9921875 C5.50875,7 6.5165625,5.875 8.649375,5.875 L18.2353125,5.875 L18.2353125,17.9921875 C18.2353125,21.71875 20.04,23.5 23.743125,23.5 L35.69625,23.5 L35.69625,43.2109375 C35.69625,45.25 34.665,46.328125 32.555625,46.328125 Z M35.1571875,18.9765625 L24.1884375,18.9765625 C23.2040625,18.9765625 22.75875,18.53125 22.75875,17.546875 L22.75875,6.4375 L35.1571875,18.9765625 Z"/>
|
8
|
+
</symbol>
|
9
|
+
<symbol width="48" height="53" viewBox="0 0 48 53" id="trash-fill">
|
10
|
+
<path fill="currentColor" d="M34.5634375,52.7734375 C38.0321875,52.7734375 40.07125,50.96875 40.2353125,47.4765625 L41.7353125,14.1015625 L45.1103125,14.1015625 C46.44625,14.1015625 47.4540625,13.09375 47.4540625,11.7578125 C47.4540625,10.4453125 46.44625,9.4375 45.1103125,9.4375 L34.9384375,9.4375 L34.9384375,6.53125 C34.9384375,2.734375 32.2665625,0.2734375 28.0009375,0.2734375 L19.9384375,0.2734375 C15.649375,0.2734375 13.0009375,2.734375 13.0009375,6.53125 L13.0009375,9.4375 L2.8290625,9.4375 C1.493125,9.4375 0.461875,10.4453125 0.461875,11.7578125 C0.461875,13.09375 1.493125,14.1015625 2.8290625,14.1015625 L6.2040625,14.1015625 L7.7275,47.4765625 C7.8915625,50.96875 9.9071875,52.7734375 13.3759375,52.7734375 L34.5634375,52.7734375 Z M30.0634375,9.4375 L17.899375,9.4375 L17.899375,6.71875 C17.9228125,5.453125 18.8603125,4.5625 20.2196875,4.5625 L27.7196875,4.5625 C29.1025,4.5625 30.0165625,5.453125 30.04,6.71875 L30.0634375,9.4375 Z M15.7665625,46.09375 C14.8290625,46.09375 14.1259375,45.296875 14.1025,44.1953125 L13.1884375,19.09375 C13.165,18.015625 13.915,17.21875 14.8525,17.21875 C15.79,17.21875 16.5634375,18.0625 16.586875,19.09375 L17.4540625,44.171875 C17.4775,45.2265625 16.7509375,46.09375 15.7665625,46.09375 Z M23.9696875,46.09375 C23.055625,46.09375 22.25875,45.2265625 22.25875,44.1953125 L22.2353125,19.09375 C22.2353125,18.0625 23.055625,17.21875 23.9696875,17.21875 C24.88375,17.21875 25.7040625,18.0625 25.7040625,19.09375 L25.7040625,44.1953125 C25.7040625,45.2265625 24.88375,46.09375 23.9696875,46.09375 Z M32.1728125,46.09375 C31.1884375,46.09375 30.461875,45.2265625 30.50875,44.171875 L31.3525,19.09375 C31.399375,18.0625 32.1728125,17.21875 33.086875,17.21875 C34.0478125,17.21875 34.7978125,18.0390625 34.774375,19.09375 L33.836875,44.1953125 C33.8134375,45.296875 33.1103125,46.09375 32.1728125,46.09375 Z"/>
|
11
|
+
</symbol>
|
12
|
+
<symbol width="48" height="54" viewBox="0 0 48 54" id="trash">
|
13
|
+
<path fill="currentColor" d="M34.774375,53.6171875 C38.57125,53.6171875 40.961875,51.4140625 41.149375,47.59375 L42.69625,14.1015625 L45.1103125,14.1015625 C46.44625,14.1015625 47.4540625,13.09375 47.4540625,11.7578125 C47.4540625,10.4453125 46.44625,9.4375 45.1103125,9.4375 L34.915,9.4375 L34.915,6.53125 C34.915,2.734375 32.2665625,0.2734375 27.9775,0.2734375 L19.915,0.2734375 C15.6259375,0.2734375 12.9775,2.734375 12.9775,6.53125 L12.9775,9.4375 L2.8290625,9.4375 C1.493125,9.4375 0.461875,10.4453125 0.461875,11.7578125 C0.461875,13.09375 1.493125,14.1015625 2.8290625,14.1015625 L5.2196875,14.1015625 L6.79,47.6171875 C6.9775,51.4375 9.3446875,53.6171875 13.1884375,53.6171875 L34.774375,53.6171875 Z M30.04,9.4375 L17.8759375,9.4375 L17.899375,6.71875 C17.899375,5.453125 18.836875,4.5625 20.19625,4.5625 L27.7196875,4.5625 C29.0790625,4.5625 30.0165625,5.453125 30.0165625,6.71875 L30.04,9.4375 Z M34.1415625,48.90625 L13.774375,48.90625 C12.50875,48.90625 11.6415625,47.9921875 11.57125,46.609375 L10.0478125,14.1015625 L37.82125,14.1015625 L36.3446875,46.609375 C36.2978125,48.015625 35.430625,48.90625 34.1415625,48.90625 Z M30.836875,45.25 C31.774375,45.25 32.5009375,44.453125 32.524375,43.375 L33.2275,19.796875 C33.274375,18.71875 32.524375,17.8984375 31.586875,17.8984375 C30.649375,17.8984375 29.899375,18.7421875 29.8759375,19.7734375 L29.1728125,43.3515625 C29.1259375,44.40625 29.8759375,45.25 30.836875,45.25 Z M17.0790625,45.25 C18.0634375,45.25 18.79,44.40625 18.7665625,43.3515625 L18.0634375,19.7734375 C18.0165625,18.7421875 17.2665625,17.8984375 16.3525,17.8984375 C15.3915625,17.8984375 14.665,18.71875 14.711875,19.796875 L15.415,43.375 C15.4384375,44.453125 16.1415625,45.25 17.0790625,45.25 Z M23.9696875,45.25 C24.88375,45.25 25.6571875,44.40625 25.6571875,43.375 L25.6571875,19.7734375 C25.6571875,18.7421875 24.9071875,17.8984375 23.9696875,17.8984375 C23.0321875,17.8984375 22.25875,18.7421875 22.25875,19.7734375 L22.25875,43.375 C22.25875,44.40625 23.0321875,45.25 23.9696875,45.25 Z"/>
|
14
|
+
</symbol>
|
15
|
+
</defs>
|
16
|
+
</svg>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/*
|
2
|
+
This file was generated by https://rubygems.org/gems/svg_sprite with the
|
3
|
+
following command:
|
4
|
+
|
5
|
+
svg_sprite generate --input images --sprite-path sprite/original.svg --css-path sprite/original.css --optimize
|
6
|
+
*/
|
7
|
+
|
8
|
+
.icon--doc-fill {
|
9
|
+
width: 42px;
|
10
|
+
height: 52px;
|
11
|
+
}
|
12
|
+
|
13
|
+
.icon--doc {
|
14
|
+
width: 42px;
|
15
|
+
height: 52px;
|
16
|
+
}
|
17
|
+
|
18
|
+
.icon--trash-fill {
|
19
|
+
width: 48px;
|
20
|
+
height: 53px;
|
21
|
+
}
|
22
|
+
|
23
|
+
.icon--trash {
|
24
|
+
width: 48px;
|
25
|
+
height: 54px;
|
26
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
2
|
+
<defs>
|
3
|
+
<symbol width="42" height="52" viewBox="0 0 42 52" id="doc-fill">
|
4
|
+
<path fill="#313457" d="M33.118125,51.6953125 C38.2978125,51.6953125 41.0634375,48.90625 41.0634375,43.703125 L41.0634375,22.984375 L23.0165625,22.984375 C20.13375,22.984375 18.7275,21.578125 18.7275,18.71875 L18.7275,0.5078125 L8.086875,0.5078125 C2.9071875,0.5078125 0.1415625,3.3203125 0.1415625,8.5234375 L0.1415625,43.703125 C0.1415625,48.9296875 2.9071875,51.6953125 8.086875,51.6953125 L33.118125,51.6953125 Z M40.8290625,19.375 C40.711875,18.25 39.8446875,17.1484375 38.555625,15.8359375 L25.8525,2.96875 C24.6103125,1.7265625 23.4853125,0.859375 22.3603125,0.7421875 L22.3603125,17.96875 C22.3603125,18.90625 22.8290625,19.375 23.7665625,19.375 L40.8290625,19.375 Z"/>
|
5
|
+
</symbol>
|
6
|
+
<symbol width="42" height="52" viewBox="0 0 42 52" id="doc">
|
7
|
+
<path fill="#313457" d="M33.118125,51.6953125 C38.2978125,51.6953125 41.0634375,48.90625 41.0634375,43.703125 L41.0634375,22.4453125 C41.0634375,18.9765625 40.57125,17.3125 38.3915625,15.0859375 L26.649375,3.1796875 C24.5165625,1.0234375 22.7353125,0.5078125 19.5478125,0.5078125 L8.086875,0.5078125 C2.9071875,0.5078125 0.1415625,3.3203125 0.1415625,8.5234375 L0.1415625,43.703125 C0.1415625,48.9296875 2.9071875,51.6953125 8.086875,51.6953125 L33.118125,51.6953125 Z M32.555625,46.328125 L8.649375,46.328125 C6.5165625,46.328125 5.50875,45.25 5.50875,43.2109375 L5.50875,8.9921875 C5.50875,7 6.5165625,5.875 8.649375,5.875 L18.2353125,5.875 L18.2353125,17.9921875 C18.2353125,21.71875 20.04,23.5 23.743125,23.5 L35.69625,23.5 L35.69625,43.2109375 C35.69625,45.25 34.665,46.328125 32.555625,46.328125 Z M35.1571875,18.9765625 L24.1884375,18.9765625 C23.2040625,18.9765625 22.75875,18.53125 22.75875,17.546875 L22.75875,6.4375 L35.1571875,18.9765625 Z"/>
|
8
|
+
</symbol>
|
9
|
+
<symbol width="48" height="53" viewBox="0 0 48 53" id="trash-fill">
|
10
|
+
<path fill="#313457" d="M34.5634375,52.7734375 C38.0321875,52.7734375 40.07125,50.96875 40.2353125,47.4765625 L41.7353125,14.1015625 L45.1103125,14.1015625 C46.44625,14.1015625 47.4540625,13.09375 47.4540625,11.7578125 C47.4540625,10.4453125 46.44625,9.4375 45.1103125,9.4375 L34.9384375,9.4375 L34.9384375,6.53125 C34.9384375,2.734375 32.2665625,0.2734375 28.0009375,0.2734375 L19.9384375,0.2734375 C15.649375,0.2734375 13.0009375,2.734375 13.0009375,6.53125 L13.0009375,9.4375 L2.8290625,9.4375 C1.493125,9.4375 0.461875,10.4453125 0.461875,11.7578125 C0.461875,13.09375 1.493125,14.1015625 2.8290625,14.1015625 L6.2040625,14.1015625 L7.7275,47.4765625 C7.8915625,50.96875 9.9071875,52.7734375 13.3759375,52.7734375 L34.5634375,52.7734375 Z M30.0634375,9.4375 L17.899375,9.4375 L17.899375,6.71875 C17.9228125,5.453125 18.8603125,4.5625 20.2196875,4.5625 L27.7196875,4.5625 C29.1025,4.5625 30.0165625,5.453125 30.04,6.71875 L30.0634375,9.4375 Z M15.7665625,46.09375 C14.8290625,46.09375 14.1259375,45.296875 14.1025,44.1953125 L13.1884375,19.09375 C13.165,18.015625 13.915,17.21875 14.8525,17.21875 C15.79,17.21875 16.5634375,18.0625 16.586875,19.09375 L17.4540625,44.171875 C17.4775,45.2265625 16.7509375,46.09375 15.7665625,46.09375 Z M23.9696875,46.09375 C23.055625,46.09375 22.25875,45.2265625 22.25875,44.1953125 L22.2353125,19.09375 C22.2353125,18.0625 23.055625,17.21875 23.9696875,17.21875 C24.88375,17.21875 25.7040625,18.0625 25.7040625,19.09375 L25.7040625,44.1953125 C25.7040625,45.2265625 24.88375,46.09375 23.9696875,46.09375 Z M32.1728125,46.09375 C31.1884375,46.09375 30.461875,45.2265625 30.50875,44.171875 L31.3525,19.09375 C31.399375,18.0625 32.1728125,17.21875 33.086875,17.21875 C34.0478125,17.21875 34.7978125,18.0390625 34.774375,19.09375 L33.836875,44.1953125 C33.8134375,45.296875 33.1103125,46.09375 32.1728125,46.09375 Z"/>
|
11
|
+
</symbol>
|
12
|
+
<symbol width="48" height="54" viewBox="0 0 48 54" id="trash">
|
13
|
+
<path fill="#313457" d="M34.774375,53.6171875 C38.57125,53.6171875 40.961875,51.4140625 41.149375,47.59375 L42.69625,14.1015625 L45.1103125,14.1015625 C46.44625,14.1015625 47.4540625,13.09375 47.4540625,11.7578125 C47.4540625,10.4453125 46.44625,9.4375 45.1103125,9.4375 L34.915,9.4375 L34.915,6.53125 C34.915,2.734375 32.2665625,0.2734375 27.9775,0.2734375 L19.915,0.2734375 C15.6259375,0.2734375 12.9775,2.734375 12.9775,6.53125 L12.9775,9.4375 L2.8290625,9.4375 C1.493125,9.4375 0.461875,10.4453125 0.461875,11.7578125 C0.461875,13.09375 1.493125,14.1015625 2.8290625,14.1015625 L5.2196875,14.1015625 L6.79,47.6171875 C6.9775,51.4375 9.3446875,53.6171875 13.1884375,53.6171875 L34.774375,53.6171875 Z M30.04,9.4375 L17.8759375,9.4375 L17.899375,6.71875 C17.899375,5.453125 18.836875,4.5625 20.19625,4.5625 L27.7196875,4.5625 C29.0790625,4.5625 30.0165625,5.453125 30.0165625,6.71875 L30.04,9.4375 Z M34.1415625,48.90625 L13.774375,48.90625 C12.50875,48.90625 11.6415625,47.9921875 11.57125,46.609375 L10.0478125,14.1015625 L37.82125,14.1015625 L36.3446875,46.609375 C36.2978125,48.015625 35.430625,48.90625 34.1415625,48.90625 Z M30.836875,45.25 C31.774375,45.25 32.5009375,44.453125 32.524375,43.375 L33.2275,19.796875 C33.274375,18.71875 32.524375,17.8984375 31.586875,17.8984375 C30.649375,17.8984375 29.899375,18.7421875 29.8759375,19.7734375 L29.1728125,43.3515625 C29.1259375,44.40625 29.8759375,45.25 30.836875,45.25 Z M17.0790625,45.25 C18.0634375,45.25 18.79,44.40625 18.7665625,43.3515625 L18.0634375,19.7734375 C18.0165625,18.7421875 17.2665625,17.8984375 16.3525,17.8984375 C15.3915625,17.8984375 14.665,18.71875 14.711875,19.796875 L15.415,43.375 C15.4384375,44.453125 16.1415625,45.25 17.0790625,45.25 Z M23.9696875,45.25 C24.88375,45.25 25.6571875,44.40625 25.6571875,43.375 L25.6571875,19.7734375 C25.6571875,18.7421875 24.9071875,17.8984375 23.9696875,17.8984375 C23.0321875,17.8984375 22.25875,18.7421875 22.25875,19.7734375 L22.25875,43.375 C22.25875,44.40625 23.0321875,45.25 23.9696875,45.25 Z"/>
|
14
|
+
</symbol>
|
15
|
+
</defs>
|
16
|
+
</svg>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/*
|
2
|
+
This file was generated by https://rubygems.org/gems/svg_sprite with the
|
3
|
+
following command:
|
4
|
+
|
5
|
+
svg_sprite generate --input examples/images --sprite-path examples/sprite/remove.svg --css-path examples/sprite/remove.css --optimize --stroke remove --fill remove
|
6
|
+
*/
|
7
|
+
|
8
|
+
.icon--doc-fill {
|
9
|
+
width: 42px;
|
10
|
+
height: 52px;
|
11
|
+
}
|
12
|
+
|
13
|
+
.icon--doc {
|
14
|
+
width: 42px;
|
15
|
+
height: 52px;
|
16
|
+
}
|
17
|
+
|
18
|
+
.icon--trash-fill {
|
19
|
+
width: 48px;
|
20
|
+
height: 53px;
|
21
|
+
}
|
22
|
+
|
23
|
+
.icon--trash {
|
24
|
+
width: 48px;
|
25
|
+
height: 54px;
|
26
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
2
|
+
<defs>
|
3
|
+
<symbol width="42" height="52" viewBox="0 0 42 52" id="doc-fill">
|
4
|
+
<path d="M33.118125,51.6953125 C38.2978125,51.6953125 41.0634375,48.90625 41.0634375,43.703125 L41.0634375,22.984375 L23.0165625,22.984375 C20.13375,22.984375 18.7275,21.578125 18.7275,18.71875 L18.7275,0.5078125 L8.086875,0.5078125 C2.9071875,0.5078125 0.1415625,3.3203125 0.1415625,8.5234375 L0.1415625,43.703125 C0.1415625,48.9296875 2.9071875,51.6953125 8.086875,51.6953125 L33.118125,51.6953125 Z M40.8290625,19.375 C40.711875,18.25 39.8446875,17.1484375 38.555625,15.8359375 L25.8525,2.96875 C24.6103125,1.7265625 23.4853125,0.859375 22.3603125,0.7421875 L22.3603125,17.96875 C22.3603125,18.90625 22.8290625,19.375 23.7665625,19.375 L40.8290625,19.375 Z"/>
|
5
|
+
</symbol>
|
6
|
+
<symbol width="42" height="52" viewBox="0 0 42 52" id="doc">
|
7
|
+
<path d="M33.118125,51.6953125 C38.2978125,51.6953125 41.0634375,48.90625 41.0634375,43.703125 L41.0634375,22.4453125 C41.0634375,18.9765625 40.57125,17.3125 38.3915625,15.0859375 L26.649375,3.1796875 C24.5165625,1.0234375 22.7353125,0.5078125 19.5478125,0.5078125 L8.086875,0.5078125 C2.9071875,0.5078125 0.1415625,3.3203125 0.1415625,8.5234375 L0.1415625,43.703125 C0.1415625,48.9296875 2.9071875,51.6953125 8.086875,51.6953125 L33.118125,51.6953125 Z M32.555625,46.328125 L8.649375,46.328125 C6.5165625,46.328125 5.50875,45.25 5.50875,43.2109375 L5.50875,8.9921875 C5.50875,7 6.5165625,5.875 8.649375,5.875 L18.2353125,5.875 L18.2353125,17.9921875 C18.2353125,21.71875 20.04,23.5 23.743125,23.5 L35.69625,23.5 L35.69625,43.2109375 C35.69625,45.25 34.665,46.328125 32.555625,46.328125 Z M35.1571875,18.9765625 L24.1884375,18.9765625 C23.2040625,18.9765625 22.75875,18.53125 22.75875,17.546875 L22.75875,6.4375 L35.1571875,18.9765625 Z"/>
|
8
|
+
</symbol>
|
9
|
+
<symbol width="48" height="53" viewBox="0 0 48 53" id="trash-fill">
|
10
|
+
<path d="M34.5634375,52.7734375 C38.0321875,52.7734375 40.07125,50.96875 40.2353125,47.4765625 L41.7353125,14.1015625 L45.1103125,14.1015625 C46.44625,14.1015625 47.4540625,13.09375 47.4540625,11.7578125 C47.4540625,10.4453125 46.44625,9.4375 45.1103125,9.4375 L34.9384375,9.4375 L34.9384375,6.53125 C34.9384375,2.734375 32.2665625,0.2734375 28.0009375,0.2734375 L19.9384375,0.2734375 C15.649375,0.2734375 13.0009375,2.734375 13.0009375,6.53125 L13.0009375,9.4375 L2.8290625,9.4375 C1.493125,9.4375 0.461875,10.4453125 0.461875,11.7578125 C0.461875,13.09375 1.493125,14.1015625 2.8290625,14.1015625 L6.2040625,14.1015625 L7.7275,47.4765625 C7.8915625,50.96875 9.9071875,52.7734375 13.3759375,52.7734375 L34.5634375,52.7734375 Z M30.0634375,9.4375 L17.899375,9.4375 L17.899375,6.71875 C17.9228125,5.453125 18.8603125,4.5625 20.2196875,4.5625 L27.7196875,4.5625 C29.1025,4.5625 30.0165625,5.453125 30.04,6.71875 L30.0634375,9.4375 Z M15.7665625,46.09375 C14.8290625,46.09375 14.1259375,45.296875 14.1025,44.1953125 L13.1884375,19.09375 C13.165,18.015625 13.915,17.21875 14.8525,17.21875 C15.79,17.21875 16.5634375,18.0625 16.586875,19.09375 L17.4540625,44.171875 C17.4775,45.2265625 16.7509375,46.09375 15.7665625,46.09375 Z M23.9696875,46.09375 C23.055625,46.09375 22.25875,45.2265625 22.25875,44.1953125 L22.2353125,19.09375 C22.2353125,18.0625 23.055625,17.21875 23.9696875,17.21875 C24.88375,17.21875 25.7040625,18.0625 25.7040625,19.09375 L25.7040625,44.1953125 C25.7040625,45.2265625 24.88375,46.09375 23.9696875,46.09375 Z M32.1728125,46.09375 C31.1884375,46.09375 30.461875,45.2265625 30.50875,44.171875 L31.3525,19.09375 C31.399375,18.0625 32.1728125,17.21875 33.086875,17.21875 C34.0478125,17.21875 34.7978125,18.0390625 34.774375,19.09375 L33.836875,44.1953125 C33.8134375,45.296875 33.1103125,46.09375 32.1728125,46.09375 Z"/>
|
11
|
+
</symbol>
|
12
|
+
<symbol width="48" height="54" viewBox="0 0 48 54" id="trash">
|
13
|
+
<path d="M34.774375,53.6171875 C38.57125,53.6171875 40.961875,51.4140625 41.149375,47.59375 L42.69625,14.1015625 L45.1103125,14.1015625 C46.44625,14.1015625 47.4540625,13.09375 47.4540625,11.7578125 C47.4540625,10.4453125 46.44625,9.4375 45.1103125,9.4375 L34.915,9.4375 L34.915,6.53125 C34.915,2.734375 32.2665625,0.2734375 27.9775,0.2734375 L19.915,0.2734375 C15.6259375,0.2734375 12.9775,2.734375 12.9775,6.53125 L12.9775,9.4375 L2.8290625,9.4375 C1.493125,9.4375 0.461875,10.4453125 0.461875,11.7578125 C0.461875,13.09375 1.493125,14.1015625 2.8290625,14.1015625 L5.2196875,14.1015625 L6.79,47.6171875 C6.9775,51.4375 9.3446875,53.6171875 13.1884375,53.6171875 L34.774375,53.6171875 Z M30.04,9.4375 L17.8759375,9.4375 L17.899375,6.71875 C17.899375,5.453125 18.836875,4.5625 20.19625,4.5625 L27.7196875,4.5625 C29.0790625,4.5625 30.0165625,5.453125 30.0165625,6.71875 L30.04,9.4375 Z M34.1415625,48.90625 L13.774375,48.90625 C12.50875,48.90625 11.6415625,47.9921875 11.57125,46.609375 L10.0478125,14.1015625 L37.82125,14.1015625 L36.3446875,46.609375 C36.2978125,48.015625 35.430625,48.90625 34.1415625,48.90625 Z M30.836875,45.25 C31.774375,45.25 32.5009375,44.453125 32.524375,43.375 L33.2275,19.796875 C33.274375,18.71875 32.524375,17.8984375 31.586875,17.8984375 C30.649375,17.8984375 29.899375,18.7421875 29.8759375,19.7734375 L29.1728125,43.3515625 C29.1259375,44.40625 29.8759375,45.25 30.836875,45.25 Z M17.0790625,45.25 C18.0634375,45.25 18.79,44.40625 18.7665625,43.3515625 L18.0634375,19.7734375 C18.0165625,18.7421875 17.2665625,17.8984375 16.3525,17.8984375 C15.3915625,17.8984375 14.665,18.71875 14.711875,19.796875 L15.415,43.375 C15.4384375,44.453125 16.1415625,45.25 17.0790625,45.25 Z M23.9696875,45.25 C24.88375,45.25 25.6571875,44.40625 25.6571875,43.375 L25.6571875,19.7734375 C25.6571875,18.7421875 24.9071875,17.8984375 23.9696875,17.8984375 C23.0321875,17.8984375 22.25875,18.7421875 22.25875,19.7734375 L22.25875,43.375 C22.25875,44.40625 23.0321875,45.25 23.9696875,45.25 Z"/>
|
14
|
+
</symbol>
|
15
|
+
</defs>
|
16
|
+
</svg>
|
data/exe/svg_sprite
CHANGED
data/lib/svg_sprite.rb
CHANGED
@@ -1,36 +1,136 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
require "erb"
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
class SvgSprite
|
5
4
|
require "svg_optimizer"
|
6
5
|
require "thor"
|
7
6
|
require "fileutils"
|
7
|
+
require "shellwords"
|
8
|
+
require "pathname"
|
8
9
|
|
9
10
|
require "svg_sprite/version"
|
10
|
-
require "svg_sprite/template/scss"
|
11
|
-
require "svg_sprite/template/css"
|
12
|
-
require "svg_sprite/template"
|
13
|
-
require "svg_sprite/sprite"
|
14
|
-
require "svg_sprite/source"
|
15
|
-
require "svg_sprite/svg"
|
16
11
|
require "svg_sprite/cli"
|
12
|
+
require "svg_sprite/svg"
|
13
|
+
|
14
|
+
NOKOGIRI_SAVE_OPTIONS = {
|
15
|
+
save_with: Nokogiri::XML::Node::SaveOptions::DEFAULT_XML |
|
16
|
+
Nokogiri::XML::Node::SaveOptions::NO_DECLARATION
|
17
|
+
}.freeze
|
18
|
+
|
19
|
+
def self.call(
|
20
|
+
name:, input:, sprite_path:, css_path:,
|
21
|
+
optimize: true, stroke: nil, fill: nil
|
22
|
+
)
|
23
|
+
new(
|
24
|
+
name: name,
|
25
|
+
input: input,
|
26
|
+
sprite_path: sprite_path,
|
27
|
+
css_path: css_path,
|
28
|
+
optimize: optimize,
|
29
|
+
stroke: stroke,
|
30
|
+
fill: fill
|
31
|
+
).call
|
32
|
+
end
|
33
|
+
|
34
|
+
attr_reader :name, :sprite_path, :input, :css_path, :optimize, :stroke, :fill,
|
35
|
+
:input_files
|
36
|
+
|
37
|
+
def initialize(
|
38
|
+
name:, input:, sprite_path:, css_path:, optimize:, stroke:, fill:
|
39
|
+
)
|
40
|
+
@name = name
|
41
|
+
@input = input
|
42
|
+
@input_files = Dir["#{input}/**/*.svg"].sort
|
43
|
+
@sprite_path = sprite_path
|
44
|
+
@css_path = css_path
|
45
|
+
@optimize = optimize
|
46
|
+
@stroke = stroke
|
47
|
+
@fill = fill
|
48
|
+
end
|
49
|
+
|
50
|
+
def call
|
51
|
+
save_file sprite_path, svg_sprite
|
52
|
+
save_file css_path, manifest(css_definitions.chomp)
|
53
|
+
end
|
54
|
+
|
55
|
+
private def manifest(css)
|
56
|
+
<<~TEXT
|
57
|
+
/*
|
58
|
+
This file was generated by https://rubygems.org/gems/svg_sprite with the
|
59
|
+
following command:
|
17
60
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
)
|
61
|
+
#{command}
|
62
|
+
*/
|
63
|
+
|
64
|
+
#{css}
|
65
|
+
TEXT
|
24
66
|
end
|
25
67
|
|
26
|
-
def
|
27
|
-
|
28
|
-
|
29
|
-
|
68
|
+
private def command
|
69
|
+
cwd = Pathname.new(Dir.pwd)
|
70
|
+
|
71
|
+
cmd = [
|
72
|
+
"svg_sprite",
|
73
|
+
"generate",
|
74
|
+
"--input",
|
75
|
+
Pathname.new(input).relative_path_from(cwd).to_s,
|
76
|
+
"--sprite-path",
|
77
|
+
Pathname.new(sprite_path).relative_path_from(cwd).to_s,
|
78
|
+
"--css-path",
|
79
|
+
Pathname.new(css_path).relative_path_from(cwd).to_s
|
80
|
+
]
|
81
|
+
|
82
|
+
cmd.push("--optimize") if optimize
|
83
|
+
cmd.push("--stroke", stroke) if stroke
|
84
|
+
cmd.push("--fill", fill) if fill
|
85
|
+
|
86
|
+
cmd.map {|segment| Shellwords.escape(segment) }.join(" ")
|
87
|
+
end
|
88
|
+
|
89
|
+
private def svgs
|
90
|
+
@svgs ||= input_files.map do |file|
|
91
|
+
SVG.new(file, optimize: optimize, stroke: stroke, fill: fill)
|
92
|
+
end
|
93
|
+
end
|
94
|
+
|
95
|
+
private def css_definitions
|
96
|
+
svgs.each_with_object(StringIO.new) do |file, io|
|
97
|
+
io << ".#{name}--#{file.id} {\n"
|
98
|
+
io << " width: #{file.width}px;\n"
|
99
|
+
io << " height: #{file.height}px;\n"
|
100
|
+
io << "}\n\n"
|
101
|
+
end.tap(&:rewind).read.chomp
|
102
|
+
end
|
103
|
+
|
104
|
+
private def save_file(filepath, content)
|
105
|
+
FileUtils.mkdir_p(File.dirname(filepath))
|
106
|
+
|
107
|
+
File.open(filepath, "w") do |io|
|
108
|
+
io << content
|
30
109
|
end
|
31
110
|
end
|
32
111
|
|
33
|
-
def
|
34
|
-
|
112
|
+
private def svg_sprite
|
113
|
+
builder = sprite_builder
|
114
|
+
add_symbols(builder.doc.css("defs").first)
|
115
|
+
|
116
|
+
Nokogiri::XML(builder.to_xml) {|doc| doc.default_xml.noblanks }
|
117
|
+
.to_xml(NOKOGIRI_SAVE_OPTIONS.dup.merge(indent: 2))
|
118
|
+
end
|
119
|
+
|
120
|
+
private def sprite_builder
|
121
|
+
Nokogiri::XML::Builder.new(encoding: "UTF-8") do |xml|
|
122
|
+
xml.svg(
|
123
|
+
xmlns: "http://www.w3.org/2000/svg",
|
124
|
+
style: "display: none"
|
125
|
+
) do |svg|
|
126
|
+
svg.defs { }
|
127
|
+
end
|
128
|
+
end
|
129
|
+
end
|
130
|
+
|
131
|
+
private def add_symbols(defs)
|
132
|
+
svgs.each do |svg|
|
133
|
+
defs << svg.symbol
|
134
|
+
end
|
35
135
|
end
|
36
136
|
end
|
data/lib/svg_sprite/cli.rb
CHANGED
@@ -1,4 +1,6 @@
|
|
1
|
-
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
class SvgSprite
|
2
4
|
class CLI < Thor
|
3
5
|
check_unknown_options!
|
4
6
|
|
@@ -6,10 +8,6 @@ module SvgSprite
|
|
6
8
|
true
|
7
9
|
end
|
8
10
|
|
9
|
-
def self.formats
|
10
|
-
TEMPLATES.keys
|
11
|
-
end
|
12
|
-
|
13
11
|
desc "version", "Display svg_sprite version"
|
14
12
|
map %w[-v --version] => :version
|
15
13
|
|
@@ -17,31 +15,49 @@ module SvgSprite
|
|
17
15
|
say SvgSprite::VERSION
|
18
16
|
end
|
19
17
|
|
20
|
-
desc "generate",
|
21
|
-
|
22
|
-
option :
|
23
|
-
|
24
|
-
|
18
|
+
desc "generate",
|
19
|
+
"Generate the SVG sprite by embedding the images as data URIs."
|
20
|
+
option :input,
|
21
|
+
aliases: %w[-i],
|
22
|
+
required: true,
|
23
|
+
desc: "The input directory. Will match INPUT/**/*.svg."
|
24
|
+
option :css_path,
|
25
|
+
aliases: %w[-c],
|
26
|
+
required: true,
|
27
|
+
desc: "The CSS output file path."
|
28
|
+
option :sprite_path,
|
29
|
+
aliases: %w[-s],
|
30
|
+
required: true,
|
31
|
+
desc: "The SVG output file path."
|
32
|
+
option :name,
|
33
|
+
aliases: %w[-n],
|
34
|
+
default: "sprite",
|
35
|
+
desc: "The sprite name. This will be used as the variable for dynamic files."
|
36
|
+
option :optimize,
|
37
|
+
aliases: %w[-o],
|
38
|
+
default: true,
|
39
|
+
type: :boolean,
|
40
|
+
desc: "Optimize SVG files."
|
41
|
+
option :stroke,
|
42
|
+
aliases: %w[-t],
|
43
|
+
enum: %w[current-color remove],
|
44
|
+
desc: "Stroke replacement strategy."
|
45
|
+
option :fill,
|
46
|
+
aliases: %w[-f],
|
47
|
+
enum: %w[current-color remove],
|
48
|
+
desc: "Fill replacement strategy."
|
25
49
|
def generate
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
50
|
+
input = File.expand_path(options["input"])
|
51
|
+
|
52
|
+
SvgSprite.call(
|
53
|
+
input: input,
|
54
|
+
sprite_path: File.expand_path(options["sprite_path"]),
|
55
|
+
css_path: File.expand_path(options["css_path"]),
|
56
|
+
name: options["name"],
|
57
|
+
optimize: options["optimize"],
|
58
|
+
stroke: options["stroke"],
|
59
|
+
fill: options["fill"]
|
34
60
|
)
|
35
61
|
end
|
36
|
-
|
37
|
-
private
|
38
|
-
|
39
|
-
def valid_format?(format)
|
40
|
-
formats.include?(format)
|
41
|
-
end
|
42
|
-
|
43
|
-
def formats
|
44
|
-
self.class.formats
|
45
|
-
end
|
46
62
|
end
|
47
63
|
end
|
data/lib/svg_sprite/svg.rb
CHANGED
@@ -1,78 +1,66 @@
|
|
1
|
-
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
class SvgSprite
|
2
4
|
class SVG
|
3
|
-
attr_reader :
|
5
|
+
attr_reader :filepath, :optimize, :stroke, :fill
|
4
6
|
|
5
|
-
def initialize(
|
6
|
-
@
|
7
|
+
def initialize(filepath, optimize:, stroke:, fill:)
|
8
|
+
@filepath = filepath
|
9
|
+
@optimize = optimize
|
10
|
+
@stroke = stroke
|
11
|
+
@fill = fill
|
7
12
|
end
|
8
13
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
14
|
+
def symbol
|
15
|
+
@symbol ||= xml.css("svg").first.clone.tap do |node|
|
16
|
+
node.name = "symbol"
|
17
|
+
node.set_attribute :id, id
|
13
18
|
|
14
|
-
|
15
|
-
|
16
|
-
|
19
|
+
process_stroke(node)
|
20
|
+
process_fill(node)
|
21
|
+
end
|
17
22
|
end
|
18
23
|
|
19
|
-
# Return a Nokogiri representation of the <svg> element.
|
20
|
-
def svg
|
21
|
-
@svg ||= Nokogiri::XML(contents).css("svg").first
|
22
|
-
end
|
23
|
-
|
24
|
-
# Return the <svg>'s width.
|
25
24
|
def width
|
26
|
-
|
25
|
+
symbol[:width]
|
27
26
|
end
|
28
27
|
|
29
|
-
# Return the <svg>'s height.
|
30
28
|
def height
|
31
|
-
|
32
|
-
end
|
33
|
-
|
34
|
-
# Return the raw content. This content is not optimized by svg_optimizer.
|
35
|
-
def contents
|
36
|
-
@contents ||= File.read(path)
|
29
|
+
symbol[:height]
|
37
30
|
end
|
38
31
|
|
39
|
-
|
40
|
-
|
41
|
-
@optimized ||= SvgOptimizer.optimize(contents)
|
32
|
+
def id
|
33
|
+
File.basename(filepath, ".*")
|
42
34
|
end
|
43
35
|
|
44
|
-
|
45
|
-
|
46
|
-
|
36
|
+
private def xml
|
37
|
+
@xml ||= begin
|
38
|
+
contents = File.read(filepath)
|
39
|
+
contents = SvgOptimizer.optimize(contents) if optimize
|
40
|
+
Nokogiri::XML(contents)
|
41
|
+
end
|
47
42
|
end
|
48
43
|
|
49
|
-
|
50
|
-
|
51
|
-
Base64.strict_encode64(optimized)
|
44
|
+
private def process_stroke(node)
|
45
|
+
process_attribute(node, "stroke", stroke)
|
52
46
|
end
|
53
47
|
|
54
|
-
|
55
|
-
|
56
|
-
[base64_data_uri, urlencoded_data_uri].sort_by(&:bytesize).first
|
48
|
+
private def process_fill(node)
|
49
|
+
process_attribute(node, "fill", fill)
|
57
50
|
end
|
58
51
|
|
59
|
-
|
60
|
-
|
61
|
-
%[data:image/svg+xml;base64,#{base64}]
|
62
|
-
end
|
52
|
+
private def process_attribute(symbol, attribute, value)
|
53
|
+
return unless value
|
63
54
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
# The output encoding based on the global configuration.
|
70
|
-
def encoding
|
71
|
-
Encoding.default_external.name
|
72
|
-
end
|
55
|
+
symbol.css("[#{attribute}]").each do |node|
|
56
|
+
if value == "current-color" && node[attribute] != "none"
|
57
|
+
node.set_attribute(attribute, "currentColor")
|
58
|
+
end
|
73
59
|
|
74
|
-
|
75
|
-
|
60
|
+
if value == "remove" && node[attribute] != "none"
|
61
|
+
node.remove_attribute(attribute)
|
62
|
+
end
|
63
|
+
end
|
76
64
|
end
|
77
65
|
end
|
78
66
|
end
|