svg_sprite 0.2.1 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +5 -5
  2. data/.github/CODEOWNERS +4 -0
  3. data/.github/FUNDING.yml +4 -0
  4. data/.github/ISSUE_TEMPLATE/bug_report.md +41 -0
  5. data/.github/ISSUE_TEMPLATE/feature_request.md +23 -0
  6. data/.github/PULL_REQUEST_TEMPLATE.md +38 -0
  7. data/.github/dependabot.yml +15 -0
  8. data/.github/workflows/ruby-tests.yml +54 -0
  9. data/.gitignore +1 -0
  10. data/.rubocop.yml +10 -0
  11. data/CHANGELOG.md +18 -0
  12. data/CODE_OF_CONDUCT.md +55 -30
  13. data/CONTRIBUTING.md +79 -0
  14. data/Gemfile +3 -1
  15. data/{LICENSE.txt → LICENSE.md} +0 -0
  16. data/README.md +131 -83
  17. data/Rakefile +6 -1
  18. data/bin/console +1 -0
  19. data/examples/images/doc-fill.svg +3 -0
  20. data/examples/images/doc.svg +3 -0
  21. data/examples/images/trash-fill.svg +3 -0
  22. data/examples/images/trash.svg +3 -0
  23. data/examples/index.html +94 -15
  24. data/examples/sprite/current-color.css +26 -0
  25. data/examples/sprite/current-color.svg +16 -0
  26. data/examples/sprite/original.css +26 -0
  27. data/examples/sprite/original.svg +16 -0
  28. data/examples/sprite/remove.css +26 -0
  29. data/examples/sprite/remove.svg +16 -0
  30. data/exe/svg_sprite +2 -0
  31. data/lib/svg_sprite/cli.rb +44 -27
  32. data/lib/svg_sprite/svg.rb +41 -48
  33. data/lib/svg_sprite/version.rb +4 -2
  34. data/lib/svg_sprite.rb +138 -24
  35. data/svg_sprite.gemspec +15 -6
  36. metadata +89 -41
  37. data/.travis.yml +0 -4
  38. data/examples/README.md +0 -19
  39. data/examples/source/a/blue-square.svg +0 -10
  40. data/examples/source/a/orange-square.svg +0 -10
  41. data/examples/source/b/green-square.svg +0 -10
  42. data/examples/source/b/yellow-square.svg +0 -10
  43. data/examples/source/scss.scss +0 -13
  44. data/lib/svg_sprite/source.rb +0 -17
  45. data/lib/svg_sprite/sprite.rb +0 -13
  46. data/lib/svg_sprite/template/css.erb +0 -12
  47. data/lib/svg_sprite/template/css.rb +0 -13
  48. data/lib/svg_sprite/template/scss.erb +0 -33
  49. data/lib/svg_sprite/template/scss.rb +0 -19
  50. data/lib/svg_sprite/template.rb +0 -6
data/README.md CHANGED
@@ -1,137 +1,185 @@
1
- # SvgSprite
1
+ # svg_sprite
2
2
 
3
- Create SVG sprites by embedding images into CSS using data URIs. The SVGs are optimized using [svg_optimizer](https://github.com/fnando/svg_optimizer).
3
+ [![Tests](https://github.com/fnando/svg_sprite/workflows/ruby-tests/badge.svg)](https://github.com/fnando/svg_sprite)
4
+ [![Code Climate](https://codeclimate.com/github/fnando/svg_sprite/badges/gpa.svg)](https://codeclimate.com/github/fnando/svg_sprite)
5
+ [![Gem](https://img.shields.io/gem/v/svg_sprite.svg)](https://rubygems.org/gems/svg_sprite)
6
+ [![Gem](https://img.shields.io/gem/dt/svg_sprite.svg)](https://rubygems.org/gems/svg_sprite)
7
+
8
+ Create SVG sprites by embedding images into CSS using data URIs. The SVGs are
9
+ optimized using [svg_optimizer](https://github.com/fnando/svg_optimizer).
4
10
 
5
11
  ## Installation
6
12
 
7
- $ gem install svg_sprite
13
+ ```bash
14
+ gem install svg_sprite
15
+ ```
16
+
17
+ Or add the following line to your project's Gemfile:
18
+
19
+ ```ruby
20
+ gem "svg_sprite"
21
+ ```
8
22
 
9
23
  ## Usage
10
24
 
11
- ### Sass support
25
+ Let's assume there's a directory called `images` with the following files:
12
26
 
13
- To create a sprite:
27
+ ```console
28
+ $ tree images
29
+ images
30
+ ├── doc-fill.svg
31
+ ├── doc.svg
32
+ ├── trash-fill.svg
33
+ └── trash.svg
14
34
 
15
- ```
16
- $ svg_sprite -s images/icons -o styles/_icons.scss -n icons
35
+ 0 directories, 4 files
17
36
  ```
18
37
 
19
- Let's say the `images/icons` directory has a file called `user.svg`. The command above will create some mixins and placeholders.
38
+ The following command will export the SVG sprite and a CSS file with all
39
+ dimensions.
20
40
 
21
41
  ```
22
- // this variable holds all image names
23
- $icons-names
24
-
25
- // this placeholder sets a background image
26
- %icons-user
42
+ $ svg_sprite generate --input images \
43
+ --css-path sprite/icons.css \
44
+ --sprite-path sprite/icons.svg \
45
+ --name icon
46
+ ```
27
47
 
28
- // this mixin will set the background image on the element's `:before` pseudo-element.
29
- @include icons-before("user");
48
+ All SVGs will be combined into one simple file. You can then refer to the SVG by
49
+ using a link.
30
50
 
31
- // this mixin will set the background image on the element's `:after` pseudo-element.
32
- @include icons-after("user");
51
+ ```html
52
+ <svg>
53
+ <use href="sprite/icons.svg#trash" role="presentation">
54
+ </svg>
33
55
  ```
34
56
 
35
- When using SCSS, the generated stylesheet will have a variable with a list of all images inside the generated sprite, so you can hack own your own on top of that.
57
+ If you want to restrict the SVG to the original dimensions, use the export CSS
58
+ file. Classes are defined using the `--name` name (defaults to `sprite`),
59
+ together with the file name. This is an example:
36
60
 
37
- ```scss
38
- @each $image in $icons-names {
39
- .my-class-for-#{$image} {
40
- @extend %icons-#{$image};
41
- }
42
- }
43
- ```
61
+ ```css
62
+ /*
63
+ This file was generated by https://rubygems.org/gems/svg_sprite with the
64
+ following command:
44
65
 
45
- ### CSS support
66
+ svg_sprite generate --input images --sprite-path sprite/icons.svg --css-path sprite/icons.css --optimize --name icon
67
+ */
46
68
 
47
- To create a sprite:
69
+ .icon--doc-fill {
70
+ width: 42px;
71
+ height: 52px;
72
+ }
48
73
 
49
- ```
50
- $ svg_sprite -s images/icons -o styles/_icons.css -n icons
51
- ```
74
+ .icon--doc {
75
+ width: 42px;
76
+ height: 52px;
77
+ }
52
78
 
53
- Let's say the `images/icons` directory has a file called `user.svg`. The command above will create some classes.
79
+ .icon--trash-fill {
80
+ width: 48px;
81
+ height: 53px;
82
+ }
54
83
 
84
+ .icon--trash {
85
+ width: 48px;
86
+ height: 54px;
87
+ }
55
88
  ```
56
- // this class will set the background image on the element.
57
- .icons-user
58
89
 
59
- // this class will set the background image on the element's `:before` pseudo-element.
60
- .icons-user-before
90
+ By default, SVGs will keep their stroke and fill colors. You can remove or use
91
+ `currentColor` instead by using `--stroke` and `--fill`.
61
92
 
62
- // this mixin will set the background image on the element's `:after` pseudo-element.
63
- .icons-user-after
93
+ ```
94
+ $ svg_sprite generate --input images \
95
+ --sprite-path sprite/icons.svg \
96
+ --css-path sprite/icons.css \
97
+ --name icon \
98
+ --stroke current-color \
99
+ --fill current-color
100
+
101
+ $ svg_sprite generate --input images \
102
+ --sprite-path sprite/icons.svg \
103
+ --css-path sprite/icons.css \
104
+ --name icon \
105
+ --stroke remove \
106
+ --fill remove
64
107
  ```
65
108
 
66
- ### Programming API
67
-
68
- To generate the sprite without saving the file:
109
+ Finally, all SVGs will be optimized using
110
+ [svg_optimizer](https://github.com/fnando/svg_optimizer). To disable it, use
111
+ `--no-optimize`.
69
112
 
70
- ```ruby
71
- require "svg_sprite"
72
- rendered_css = SvgSprite.create({
73
- source: "./images/icons",
74
- format: "scss",
75
- name: "icons"
76
- }).render
77
- ```
113
+ ### Using sprites in practice
78
114
 
79
- To save the sprite content to a file:
115
+ You need to embed the final SVG sprite on your HTML page. With Rails, you can
116
+ use a helper like this:
80
117
 
81
118
  ```ruby
82
- require "svg_sprite"
83
- rendered_css = SvgSprite.export({
84
- source: "./images/icons",
85
- output: "./styles/_icons.scss",
86
- format: "scss",
87
- name: "icons"
88
- })
119
+ module ApplicationHelper
120
+ def svg_tag(file)
121
+ File.open(Rails.root.join("app/assets/images", "#{file}.svg")).html_safe
122
+ end
123
+ end
89
124
  ```
90
125
 
91
- #### Adding new formats
126
+ Then, on your layout file (e.g. `application.html.erb`), you can render it as
127
+ `<%= svg_tag(:icons) %>`.
92
128
 
93
- First, register your template renderer. The assigned object should respond to `call(source, options)`.
129
+ Now, you need to reference those SVG links by adding `<use href="#id">`. You can
130
+ create a helper method like this to make things easy.
94
131
 
95
132
  ```ruby
96
- # `source` is SvgSprite::Source, which wraps all SVG files.
97
- # Each item returned by `source` is a SvgSprite::SVG instance.
98
- SvgSprite::TEMPLATES["custom"] = proc do |source, options|
99
- content = source.to_a.map(&:name).join("\n")
100
- "/*\nImage names:\n#{content}\n*/"
133
+ module ApplicationHelper
134
+ def icon(name)
135
+ content_tag :svg, class: "icon icon--#{name}" do
136
+ content_tag :use, nil, href: "##{name}", role: :presentation
137
+ end
138
+ end
101
139
  end
102
140
  ```
103
141
 
104
- Then you can generate the sprite like the following:
142
+ You can render icons by using `<%= icon(:trash) %>`.
143
+
144
+ ### Programming API
145
+
146
+ To export both the CSS and SVG files:
105
147
 
106
148
  ```ruby
107
- rendered_css = SvgSprite.create({
108
- source: "./examples",
109
- format: "custom",
110
- name: "icons"
111
- }).render
112
- #=> /*
113
- #=> Image names:
114
- #=> blue-square
115
- #=> orange-square
116
- #=> green-square
117
- #=> yellow-square
118
- #=> */
149
+ require "svg_sprite"
150
+
151
+ SvgSprite.call(
152
+ input: "./images/icons",
153
+ name: "icon",
154
+ css_path: "./sprite/icons.css",
155
+ svg_path: "./sprite/icons.svg",
156
+ optimize: true,
157
+ stroke: "remove",
158
+ fill: remove
159
+ )
119
160
  ```
120
161
 
121
- See what's available in [SvgSprite::SVG](https://github.com/fnando/svg_sprite/blob/master/lib/svg_sprite/svg.rb) class.
162
+ ## Maintainer
122
163
 
123
- ## Development
164
+ - [Nando Vieira](https://github.com/fnando)
124
165
 
125
- After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
166
+ ## Contributors
126
167
 
127
- To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
168
+ - https://github.com/fnando/svg_sprite/contributors
128
169
 
129
170
  ## Contributing
130
171
 
131
- Bug reports and pull requests are welcome on GitHub at https://github.com/fnando/svg_sprite. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
132
-
172
+ For more details about how to contribute, please read
173
+ https://github.com/fnando/svg_sprite/blob/main/CONTRIBUTING.md.
133
174
 
134
175
  ## License
135
176
 
136
- The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
177
+ The gem is available as open source under the terms of the
178
+ [MIT License](https://opensource.org/licenses/MIT). A copy of the license can be
179
+ found at https://github.com/fnando/svg_sprite/blob/main/LICENSE.md.
180
+
181
+ ## Code of Conduct
137
182
 
183
+ Everyone interacting in the svg_sprite project's codebases, issue trackers, chat
184
+ rooms and mailing lists is expected to follow the
185
+ [code of conduct](https://github.com/fnando/svg_sprite/blob/main/CODE_OF_CONDUCT.md).
data/Rakefile CHANGED
@@ -1,5 +1,8 @@
1
+ # frozen_string_literal: true
2
+
1
3
  require "bundler/gem_tasks"
2
4
  require "rake/testtask"
5
+ require "rubocop/rake_task"
3
6
 
4
7
  Rake::TestTask.new(:test) do |t|
5
8
  t.libs << "test"
@@ -7,4 +10,6 @@ Rake::TestTask.new(:test) do |t|
7
10
  t.test_files = FileList["test/**/*_test.rb"]
8
11
  end
9
12
 
10
- task :default => :test
13
+ RuboCop::RakeTask.new
14
+
15
+ task default: %i[test rubocop]
data/bin/console CHANGED
@@ -1,4 +1,5 @@
1
1
  #!/usr/bin/env ruby
2
+ # frozen_string_literal: true
2
3
 
3
4
  require "bundler/setup"
4
5
  require "svg_sprite"
data/examples/images/doc-fill.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="42" height="52" viewBox="0 0 42 52">
2
+ <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"/>
3
+ </svg>
data/examples/images/doc.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="42" height="52" viewBox="0 0 42 52">
2
+ <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"/>
3
+ </svg>
data/examples/images/trash-fill.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="53" viewBox="0 0 48 53">
2
+ <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"/>
3
+ </svg>
data/examples/images/trash.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54">
2
+ <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"/>
3
+ </svg>
data/examples/index.html CHANGED
@@ -3,26 +3,105 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <title>Document</title>
6
- <link rel="stylesheet" href="dist/scss.css">
7
- <link rel="stylesheet" href="dist/css.css">
6
+ <link rel="stylesheet" href="./sprite/remove.css">
8
7
 
9
8
  <style>
10
- [class*="after"]:after,
11
- [class*="before"]:before {
12
- content: "";
13
- display: inline-block;
9
+ html,
10
+ body {
11
+ padding: 0;
12
+ margin: 0;
13
+ }
14
+
15
+ body {
16
+ width: 100vw;
17
+ height: 100vh;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ flex-grow: 0;
22
+ }
23
+
24
+ .remove svg {
25
+ fill: #4e74ff;
26
+ }
27
+
28
+ h1 {
29
+ color: #000;
30
+ font-family: sans-serif;
31
+ font-size: 18px;
32
+ }
33
+
34
+ h1 ~ h1 {
35
+ margin-top: 25px;
36
+ }
37
+
38
+ .container {
39
+ padding: 25px;
40
+ }
41
+
42
+ .red {
43
+ color: red;
44
+ }
45
+
46
+ .green {
47
+ color: green;
48
+ }
49
+
50
+ .orange {
51
+ color: orange;
14
52
  }
15
53
  </style>
16
54
  </head>
17
55
  <body>
18
- <h1>Sass</h1>
19
- <p class="sass-after">after</p>
20
- <p class="sass-before">before</p>
21
- <p class="sass-inner"></p>
22
-
23
- <h1>CSS</h1>
24
- <p class="sprite-blue-square-after">after</p>
25
- <p class="sprite-orange-square-before">before</p>
26
- <p class="sprite-green-square"></p>
56
+ <div class="container">
57
+ <h1>SVG with original color</h1>
58
+ <svg class="icon--trash">
59
+ <use href="./sprite/original.svg#trash" role="presentation">
60
+ </svg>
61
+
62
+ <svg class="icon--trash-fill">
63
+ <use href="./sprite/original.svg#trash-fill" role="presentation">
64
+ </svg>
65
+
66
+ <h1>SVG using stroke and fill from CSS</h1>
67
+ <div class="remove">
68
+ <svg class="icon--trash">
69
+ <use href="./sprite/remove.svg#trash" role="presentation">
70
+ </svg>
71
+
72
+ <svg class="icon--trash-fill">
73
+ <use href="./sprite/remove.svg#trash-fill" role="presentation">
74
+ </svg>
75
+ </div>
76
+
77
+ <h1>SVG using currentColor from parent element</h1>
78
+ <span class="red">
79
+ <svg class="icon--trash">
80
+ <use href="./sprite/current-color.svg#trash" role="presentation">
81
+ </svg>
82
+
83
+ <svg class="icon--trash-fill">
84
+ <use href="./sprite/current-color.svg#trash-fill" role="presentation">
85
+ </svg>
86
+ </span>
87
+ <span class="green">
88
+ <svg class="icon--trash">
89
+ <use href="./sprite/current-color.svg#trash" role="presentation">
90
+ </svg>
91
+
92
+ <svg class="icon--trash-fill">
93
+ <use href="./sprite/current-color.svg#trash-fill" role="presentation">
94
+ </svg>
95
+ </span>
96
+ <span class="orange">
97
+ <svg class="icon--trash">
98
+ <use href="./sprite/current-color.svg#trash" role="presentation">
99
+ </svg>
100
+
101
+ <svg class="icon--trash-fill">
102
+ <use href="./sprite/current-color.svg#trash-fill" role="presentation">
103
+ </svg>
104
+ </span>
105
+ </div>
27
106
  </body>
28
107
  </html>
data/examples/sprite/current-color.css ADDED
@@ -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/current-color.svg --css-path examples/sprite/current-color.css --optimize --stroke current-color --fill current-color
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
+ }
data/examples/sprite/current-color.svg ADDED
@@ -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>
data/examples/sprite/original.css ADDED
@@ -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
+ }
data/examples/sprite/original.svg ADDED
@@ -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>
data/examples/sprite/remove.css ADDED
@@ -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
+ }
data/examples/sprite/remove.svg ADDED
@@ -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
@@ -1,3 +1,5 @@
1
1
  #!/usr/bin/env ruby
2
+ # frozen_string_literal: true
3
+
2
4
  require "svg_sprite"
3
5
  SvgSprite::CLI.start