svg_sprite 0.2.3 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 211515d3e3988cbb9ae4e8046b49e922fed1f16f
-  data.tar.gz: 997cc7fd62d49555fd30265d4d579a434e2815b8
+SHA256:
+  metadata.gz: 419c3d44002be53dd4ffb2b82cfc2f7d8803885c9c0924e6c9d1bdd666e890d5
+  data.tar.gz: 0f3dac3aa25d5ac50ee61b4fc16977110bf612bcc66db6fdf1e021d58584c101
 SHA512:
-  metadata.gz: a994a3e1fc66dbdd450b78e3b9b696b1f29f3a202a5771405d84437b4bd75c8287fe586d1e77f1f57ab9e0d722d33eb810300be777c60693cc82b98ccf50ae75
-  data.tar.gz: 932c235f1862caedfc0002e566c66acc4058ae60569cbb34f0c9a35f1aa849e5bb7e21651408620c9166dac3b31f2350b16d08cde5a4832fb2782a041c6f6b01
+  metadata.gz: 58de163e6f9622ad56bd25627e5ba5ac35413f73a7386d307a789652f317226667b93ab827fe3fb7b9e1e91694d9d9a32789df1a622f4fa44c44fb60337fd31b
+  data.tar.gz: 8a6d7dfe7f3074ce14a89b56fa251614d8e61110107b250de03f670fde5ee1e105de2e5e5c813352d16dc2a53228f71fb45a01c6be778887b9781b5700da09a2

data/.rubocop.yml

@@ -0,0 +1,22 @@
+---
+inherit_gem:
+  rubocop-fnando: .rubocop.yml
+
+AllCops:
+  TargetRubyVersion: 2.7
+
+Layout/LineLength:
+  Exclude:
+    - lib/svg_sprite/cli.rb
+
+Metrics/ParameterLists:
+  Enabled: false
+
+Metrics/AbcSize:
+  Enabled: false
+
+Metrics/MethodLength:
+  Enabled: false
+
+Metrics/ClassLength:
+  Enabled: false

data/Gemfile

@@ -1,4 +1,6 @@
-source 'https://rubygems.org'
+# frozen_string_literal: true
+
+source "https://rubygems.org"
 
 # Specify your gem's dependencies in svg_sprite.gemspec
 gemspec

data/README.md

@@ -1,6 +1,7 @@
 # SvgSprite
 
-Create SVG sprites by embedding images into CSS using data URIs. The SVGs are optimized using [svg_optimizer](https://github.com/fnando/svg_optimizer).
+Create SVG sprites by embedding images into CSS using data URIs. The SVGs are
+optimized using [svg_optimizer](https://github.com/fnando/svg_optimizer).
 
 ## Installation
 
@@ -8,130 +9,130 @@ Create SVG sprites by embedding images into CSS using data URIs. The SVGs are op
 
 ## Usage
 
-### Sass support
+Let's assume there's a directory called `images` with the following files:
 
-To create a sprite:
+```console
+$ tree images
+images
+├── doc-fill.svg
+├── doc.svg
+├── trash-fill.svg
+└── trash.svg
 
-```
-$ svg_sprite -s images/icons -o styles/_icons.scss -n icons
+0 directories, 4 files
 ```
 
-Let's say the `images/icons` directory has a file called `user.svg`. The command above will create some mixins and placeholders.
+The following command will export the SVG sprite and a CSS file with all
+dimensions.
 
 ```
-// this variable holds all image names
-$icons-names
-
-// this placeholder sets a background image
-%icons-user
-
-// this mixin will set the background image on the element's `:before` pseudo-element.
-@include icons-before("user");
-
-// this mixin will set the background image on the element's `:after` pseudo-element.
-@include icons-after("user");
+$ svg_sprite generate --input images \
+                      --css-path sprite/icons.css \
+                      --sprite-path sprite/icons.svg \
+                      --name icon
 ```
 
-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.
+All SVGs will be combined into one simple file. You can then refer to the SVG by
+using a link.
 
-```scss
-@each $image in $icons-names {
-  .my-class-for-#{$image} {
-    @extend %icons-#{$image};
-  }
-}
+```html
+<svg>
+  <use href="sprite/icons.svg#trash" role="presentation">
+</svg>
 ```
 
-### CSS support
+If you want to restrict the SVG to the original dimensions, use the export CSS
+file. Classes are defined using the `--name` name (defaults to `sprite`),
+together with the file name. This is an example:
 
-To create a sprite:
+```css
+/*
+This file was generated by https://rubygems.org/gems/svg_sprite with the
+following command:
 
-```
-$ svg_sprite -s images/icons -o styles/_icons.css -n icons
-```
+svg_sprite generate --input images --sprite-path sprite/icons.svg --css-path sprite/icons.css --optimize
+*/
 
-Let's say the `images/icons` directory has a file called `user.svg`. The command above will create some classes.
+.icon--doc-fill {
+  width: 42px;
+  height: 52px;
+}
 
-```
-// this class will set the background image on the element.
-.icons-user
+.icon--doc {
+  width: 42px;
+  height: 52px;
+}
 
-// this class will set the background image on the element's `:before` pseudo-element.
-.icons-user-before
+.icon--trash-fill {
+  width: 48px;
+  height: 53px;
+}
 
-// this mixin will set the background image on the element's `:after` pseudo-element.
-.icons-user-after
+.icon--trash {
+  width: 48px;
+  height: 54px;
+}
 ```
 
-### Programming API
-
-To generate the sprite without saving the file:
+By default, SVGs will keep their stroke and fill colors. You can remove or use
+`currentColor` instead by using `--stroke` and `--fill`.
 
-```ruby
-require "svg_sprite"
-rendered_css = SvgSprite.create({
-  source: "./images/icons",
-  format: "scss",
-  name: "icons"
-}).render
 ```
-
-To save the sprite content to a file:
-
-```ruby
-require "svg_sprite"
-rendered_css = SvgSprite.export({
-  source: "./images/icons",
-  output: "./styles/_icons.scss",
-  format: "scss",
-  name: "icons"
-})
+$ svg_sprite generate --input images \
+                      --sprite-path sprite/icons.svg \
+                      --css-path sprite/icons.css \
+                      --stroke current-color \
+                      --fill current-color
+
+$ svg_sprite generate --input images \
+                      --sprite-path sprite/icons.svg \
+                      --css-path sprite/icons.css \
+                      --stroke remove \
+                      --fill remove
 ```
 
-#### Adding new formats
-
-First, register your template renderer. The assigned object should respond to `call(source, options)`.
+Finally, all SVGs will be optimized using
+[svg_optimizer](https://github.com/fnando/svg_optimizer). To disable it, use
+`--no-optimize`.
 
-```ruby
-# `source` is SvgSprite::Source, which wraps all SVG files.
-# Each item returned by `source` is a SvgSprite::SVG instance.
-SvgSprite::TEMPLATES["custom"] = proc do |source, options|
-  content = source.to_a.map(&:name).join("\n")
-  "/*\nImage names:\n#{content}\n*/"
-end
-```
+### Programming API
 
-Then you can generate the sprite like the following:
+To export both the CSS and SVG files:
 
 ```ruby
-rendered_css = SvgSprite.create({
-  source: "./examples",
-  format: "custom",
-  name: "icons"
-}).render
-#=> /*
-#=> Image names:
-#=> blue-square
-#=> orange-square
-#=> green-square
-#=> yellow-square
-#=> */
-```
+require "svg_sprite"
 
-See what's available in [SvgSprite::SVG](https://github.com/fnando/svg_sprite/blob/master/lib/svg_sprite/svg.rb) class.
+SvgSprite.call(
+  input: "./images/icons",
+  name: "icon",
+  css_path: "./sprite/icons.css",
+  svg_path: "./sprite/icons.svg",
+  optimize: true,
+  stroke: "remove",
+  fill: remove
+)
+```
 
 ## Development
 
-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.
+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.
 
-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).
+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).
 
 ## Contributing
 
-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.
-
+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.
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
-
+The gem is available as open source under the terms of the
+[MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "bundler/gem_tasks"
 require "rake/testtask"
 
@@ -7,4 +9,4 @@ Rake::TestTask.new(:test) do |t|
   t.test_files = FileList["test/**/*_test.rb"]
 end
 
-task :default => :test
+task default: :test

data/bin/console

@@ -1,4 +1,5 @@
 #!/usr/bin/env ruby
+# frozen_string_literal: true
 
 require "bundler/setup"
 require "svg_sprite"

data/examples/images/doc-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42" height="52" viewBox="0 0 42 52">
+  <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"/>
+</svg>

data/examples/images/doc.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42" height="52" viewBox="0 0 42 52">
+  <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"/>
+</svg>

data/examples/images/trash-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="53" viewBox="0 0 48 53">
+  <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"/>
+</svg>

data/examples/images/trash.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54">
+  <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"/>
+</svg>

data/examples/index.html

@@ -3,26 +3,105 @@
 <head>
   <meta charset="UTF-8">
   <title>Document</title>
-  <link rel="stylesheet" href="dist/scss.css">
-  <link rel="stylesheet" href="dist/css.css">
+  <link rel="stylesheet" href="./sprite/remove.css">
 
   <style>
-    [class*="after"]:after,
-    [class*="before"]:before {
-      content: "";
-      display: inline-block;
+    html,
+    body {
+      padding: 0;
+      margin: 0;
+    }
+
+    body {
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-grow: 0;
+    }
+
+    .remove svg {
+      fill: #4e74ff;
+    }
+
+    h1 {
+      color: #000;
+      font-family: sans-serif;
+      font-size: 18px;
+    }
+
+    h1 ~ h1 {
+      margin-top: 25px;
+    }
+
+    .container {
+      padding: 25px;
+    }
+
+    .red {
+      color: red;
+    }
+
+    .green {
+      color: green;
+    }
+
+    .orange {
+      color: orange;
     }
   </style>
 </head>
 <body>
-  <h1>Sass</h1>
-  <p class="sass-after">after</p>
-  <p class="sass-before">before</p>
-  <p class="sass-inner"></p>
-
-  <h1>CSS</h1>
-  <p class="sprite-blue-square-after">after</p>
-  <p class="sprite-orange-square-before">before</p>
-  <p class="sprite-green-square"></p>
+  <div class="container">
+    <h1>SVG with original color</h1>
+    <svg class="icon--trash">
+      <use href="./sprite/original.svg#trash" role="presentation">
+    </svg>
+
+    <svg class="icon--trash-fill">
+      <use href="./sprite/original.svg#trash-fill" role="presentation">
+    </svg>
+
+    <h1>SVG using stroke and fill from CSS</h1>
+    <div class="remove">
+      <svg class="icon--trash">
+        <use href="./sprite/remove.svg#trash" role="presentation">
+      </svg>
+
+      <svg class="icon--trash-fill">
+        <use href="./sprite/remove.svg#trash-fill" role="presentation">
+      </svg>
+    </div>
+
+    <h1>SVG using currentColor from parent element</h1>
+    <span class="red">
+      <svg class="icon--trash">
+        <use href="./sprite/current-color.svg#trash" role="presentation">
+      </svg>
+
+      <svg class="icon--trash-fill">
+        <use href="./sprite/current-color.svg#trash-fill" role="presentation">
+      </svg>
+    </span>
+    <span class="green">
+      <svg class="icon--trash">
+        <use href="./sprite/current-color.svg#trash" role="presentation">
+      </svg>
+
+      <svg class="icon--trash-fill">
+        <use href="./sprite/current-color.svg#trash-fill" role="presentation">
+      </svg>
+    </span>
+    <span class="orange">
+      <svg class="icon--trash">
+        <use href="./sprite/current-color.svg#trash" role="presentation">
+      </svg>
+
+      <svg class="icon--trash-fill">
+        <use href="./sprite/current-color.svg#trash-fill" role="presentation">
+      </svg>
+    </span>
+  </div>
 </body>
 </html>

data/examples/sprite/current-color.css

@@ -0,0 +1,26 @@
+/*
+This file was generated by https://rubygems.org/gems/svg_sprite with the
+following command:
+
+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
+*/
+
+.icon--doc-fill {
+  width: 42px;
+  height: 52px;
+}
+
+.icon--doc {
+  width: 42px;
+  height: 52px;
+}
+
+.icon--trash-fill {
+  width: 48px;
+  height: 53px;
+}
+
+.icon--trash {
+  width: 48px;
+  height: 54px;
+}