svg_sprite 0.0.0 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 56240f54b2d04dec2f7d0e0f4085736bb0a4734d
4
- data.tar.gz: a339f5a4726ae7bd24c1f4f4ddf0ae28e04521f3
3
+ metadata.gz: 034825d7337c6cb0e9d1c159d2f90a2754278fc8
4
+ data.tar.gz: 33c7621c2d8940ccb14d0b507f62e4a217759bc4
5
5
  SHA512:
6
- metadata.gz: fc97b8397d99a70ed3ccd03ff43539056ff81df7da6accf98b596555f3967aef4fb8a9399e97d956cc4720c83b0a2f200f923c26b9594c5ec19445b33750a8b7
7
- data.tar.gz: dae6d679f4faec94a89c99ad18f06ab32946b02b27485cc0d4fedf094d5abb4c480490336abf03c2527227973d722800e6055b36d39f35af58d4464c5f3df6ee
6
+ metadata.gz: 3a64803c8c087f1f67a5109ec30144f1634b894317a5d0343d3b6b62f5ea1810a81207e0f606e067fab2a1838c5ae3c463fb727e7aa39402b5d806ee27b3c3c1
7
+ data.tar.gz: a03e9f43ec6eb363fbbf5978951199fef18d0726b58263ef48f45da137789841706b23658f74a4ced563bc54608c883c0a2cac683eb1c3025dc683198e56ed62
data/.gitignore CHANGED
@@ -7,3 +7,6 @@
7
7
  /pkg/
8
8
  /spec/reports/
9
9
  /tmp/
10
+ .sass-cache
11
+ /examples/dist
12
+ /examples/source/_icons.scss
data/README.md CHANGED
@@ -1,28 +1,67 @@
1
1
  # SvgSprite
2
2
 
3
- Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/svg_sprite`. To experiment with that code, run `bin/console` for an interactive prompt.
4
-
5
- TODO: Delete this and the text above, and describe your gem
3
+ Create SVG sprites by embedding images into CSS using data URIs.
6
4
 
7
5
  ## Installation
8
6
 
9
- Add this line to your application's Gemfile:
7
+ $ gem install svg_sprite
8
+
9
+ ## Usage
10
+
11
+ ### Sass support
12
+
13
+ To create a sprite:
10
14
 
11
- ```ruby
12
- gem 'svg_sprite'
15
+ ```
16
+ $ svg_sprite -s images/icons -o styles/_icons.scss -n icons
13
17
  ```
14
18
 
15
- And then execute:
19
+ Let's say the `images/icons` directory has a file called `user.svg`. The command above will create some mixins and placeholders.
16
20
 
17
- $ bundle
21
+ ```
22
+ // this variable holds all image names
23
+ $icons-names
18
24
 
19
- Or install it yourself as:
25
+ // this placeholder sets a background image
26
+ %icons-user
20
27
 
21
- $ gem install svg_sprite
28
+ // this mixin will set the background image on the element's `:before` pseudo-element.
29
+ @include icons-before("user");
22
30
 
23
- ## Usage
31
+ // this mixin will set the background image on the element's `:after` pseudo-element.
32
+ @include icons-after("user");
33
+ ```
34
+
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.
24
36
 
25
- TODO: Write usage instructions here
37
+ ```scss
38
+ @each $image in $icons-names {
39
+ .my-class-for-#{$image} {
40
+ @extend %icons-#{$image};
41
+ }
42
+ }
43
+ ```
44
+
45
+ ### CSS support
46
+
47
+ To create a sprite:
48
+
49
+ ```
50
+ $ svg_sprite -s images/icons -o styles/_icons.css -n icons
51
+ ```
52
+
53
+ Let's say the `images/icons` directory has a file called `user.svg`. The command above will create some classes.
54
+
55
+ ```
56
+ // this class will set the background image on the element.
57
+ .icons-user
58
+
59
+ // this class will set the background image on the element's `:before` pseudo-element.
60
+ .icons-user-before
61
+
62
+ // this mixin will set the background image on the element's `:after` pseudo-element.
63
+ .icons-user-after
64
+ ```
26
65
 
27
66
  ## Development
28
67
 
data/Rakefile CHANGED
@@ -4,7 +4,7 @@ require "rake/testtask"
4
4
  Rake::TestTask.new(:test) do |t|
5
5
  t.libs << "test"
6
6
  t.libs << "lib"
7
- t.test_files = FileList['test/**/*_test.rb']
7
+ t.test_files = FileList["test/**/*_test.rb"]
8
8
  end
9
9
 
10
- task :default => :spec
10
+ task :default => :test
data/bin/console ADDED
@@ -0,0 +1,14 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "bundler/setup"
4
+ require "svg_sprite"
5
+
6
+ # You can add fixtures and/or initialization code here to make experimenting
7
+ # with your gem easier. You can also use a different console, if you like.
8
+
9
+ # (If you use this, don't forget to add pry to your Gemfile!)
10
+ # require "pry"
11
+ # Pry.start
12
+
13
+ require "irb"
14
+ IRB.start
data/bin/setup ADDED
@@ -0,0 +1,8 @@
1
+ #!/usr/bin/env bash
2
+ set -euo pipefail
3
+ IFS=$'\n\t'
4
+ set -vx
5
+
6
+ bundle install
7
+
8
+ # Do any other automated setup that you need to do here
@@ -0,0 +1,19 @@
1
+ # Exporting Sass files
2
+
3
+ Run this command to export the sprite:
4
+
5
+ ```
6
+ RUBYOPT="-I./lib" ./exe/svg_sprite generate -s examples/source -o examples/source/_icons.scss
7
+ ```
8
+
9
+ Then run this command to export the styles:
10
+
11
+ ````
12
+ scss examples/source/scss.scss examples/dist/scss.css
13
+ ````
14
+
15
+ # Exporting vanilla CSS
16
+
17
+ ```
18
+ RUBYOPT="-I./lib" ./exe/svg_sprite generate -s examples/source -o examples/dist/css.css
19
+ ```
@@ -0,0 +1,28 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Document</title>
6
+ <link rel="stylesheet" href="dist/scss.css">
7
+ <link rel="stylesheet" href="dist/css.css">
8
+
9
+ <style>
10
+ [class*="after"]:after,
11
+ [class*="before"]:before {
12
+ content: "";
13
+ display: inline-block;
14
+ }
15
+ </style>
16
+ </head>
17
+ <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>
27
+ </body>
28
+ </html>
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3
+ <!-- Generator: Sketch 3.4.4 (17248) - http://www.bohemiancoding.com/sketch -->
4
+ <title>Rectangle 1</title>
5
+ <desc>Created with Sketch.</desc>
6
+ <defs></defs>
7
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8
+ <rect id="Rectangle-1" fill="#4990E2" sketch:type="MSShapeGroup" x="0" y="0" width="25" height="25"></rect>
9
+ </g>
10
+ </svg>
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3
+ <!-- Generator: Sketch 3.4.4 (17248) - http://www.bohemiancoding.com/sketch -->
4
+ <title>Rectangle 1</title>
5
+ <desc>Created with Sketch.</desc>
6
+ <defs></defs>
7
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8
+ <rect id="Rectangle-1" fill="#F6A623" sketch:type="MSShapeGroup" x="0" y="0" width="25" height="25"></rect>
9
+ </g>
10
+ </svg>
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3
+ <!-- Generator: Sketch 3.4.4 (17248) - http://www.bohemiancoding.com/sketch -->
4
+ <title>Rectangle 1</title>
5
+ <desc>Created with Sketch.</desc>
6
+ <defs></defs>
7
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8
+ <rect id="Rectangle-1" fill="#7ED321" sketch:type="MSShapeGroup" x="0" y="0" width="25" height="25"></rect>
9
+ </g>
10
+ </svg>
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3
+ <!-- Generator: Sketch 3.4.4 (17248) - http://www.bohemiancoding.com/sketch -->
4
+ <title>Rectangle 1</title>
5
+ <desc>Created with Sketch.</desc>
6
+ <defs></defs>
7
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8
+ <rect id="Rectangle-1" fill="#F8E81C" sketch:type="MSShapeGroup" x="0" y="0" width="25" height="25"></rect>
9
+ </g>
10
+ </svg>
@@ -0,0 +1,13 @@
1
+ @import "./icons";
2
+
3
+ .sass-after {
4
+ @include sprite-after("blue-square");
5
+ }
6
+
7
+ .sass-before {
8
+ @include sprite-before("orange-square");
9
+ }
10
+
11
+ .sass-inner {
12
+ @extend %sprite-green-square;
13
+ }
data/exe/svg_sprite ADDED
@@ -0,0 +1,3 @@
1
+ #!/usr/bin/env ruby
2
+ require "svg_sprite"
3
+ SvgSprite::CLI.start
@@ -0,0 +1,38 @@
1
+ module SvgSprite
2
+ class CLI < Thor
3
+ check_unknown_options!
4
+
5
+ def self.exit_on_failure?
6
+ true
7
+ end
8
+
9
+ desc "version", "Display svg_sprite version"
10
+ map %w[-v --version] => :version
11
+
12
+ def version
13
+ say SvgSprite::VERSION
14
+ end
15
+
16
+ desc "generate", "Generate the SVG sprite by embedding the images as data URIs."
17
+ option :source, aliases: %w[-s], required: true, desc: "The source directory. Will match SOURCE/**/*.svg."
18
+ option :output, aliases: %w[-o], required: true, desc: "The output file. Must be a file with a known format extension (#{OUTPUT_FORMATS.join(", ")})"
19
+ option :name, aliases: %w[-n], default: "sprite", desc: "The sprite name. This will be used as the variable for dynamic files."
20
+ def generate
21
+ format = File.extname(options["output"])[1..-1]
22
+ fail Error, "ERROR: invalid output extension. Must be one of #{OUTPUT_FORMATS.join("|")}." unless valid_format?(format)
23
+
24
+ SvgSprite.export(
25
+ source: File.expand_path(options["source"]),
26
+ output: File.expand_path(options["output"]),
27
+ format: format,
28
+ name: options["name"]
29
+ )
30
+ end
31
+
32
+ private
33
+
34
+ def valid_format?(format)
35
+ OUTPUT_FORMATS.include?(format)
36
+ end
37
+ end
38
+ end
@@ -0,0 +1,17 @@
1
+ module SvgSprite
2
+ class Source
3
+ def initialize(directory)
4
+ @directory = directory
5
+ end
6
+
7
+ def each(&block)
8
+ to_a.each(&block)
9
+ end
10
+
11
+ def to_a
12
+ Dir["#{@directory}/**/*.svg"].map do |file|
13
+ SVG.new(file)
14
+ end
15
+ end
16
+ end
17
+ end
@@ -0,0 +1,13 @@
1
+ module SvgSprite
2
+ class Sprite
3
+ def initialize(source, template, options)
4
+ @source = source
5
+ @template = template
6
+ @options = options
7
+ end
8
+
9
+ def render
10
+ @template.call(@source, @options)
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,45 @@
1
+ module SvgSprite
2
+ class SVG
3
+ attr_reader :path
4
+
5
+ def initialize(path)
6
+ @path = path
7
+ end
8
+
9
+ def has_dimensions?
10
+ width && height
11
+ end
12
+
13
+ def svg
14
+ @svg ||= xml.css("svg").first
15
+ end
16
+
17
+ def width
18
+ svg["width"]
19
+ end
20
+
21
+ def height
22
+ svg["height"]
23
+ end
24
+
25
+ def xml
26
+ @xml ||= Nokogiri::XML(contents)
27
+ end
28
+
29
+ def contents
30
+ @contents ||= File.read(path)
31
+ end
32
+
33
+ def optimized
34
+ @optimized ||= SvgOptimizer.optimize(contents)
35
+ end
36
+
37
+ def base64
38
+ Base64.strict_encode64(optimized)
39
+ end
40
+
41
+ def name
42
+ File.basename(path, ".*")
43
+ end
44
+ end
45
+ end
@@ -0,0 +1,12 @@
1
+ /* Generated by sprite_svg v<%= SvgSprite::VERSION %> at <%= Time.now %> */
2
+ <% for svg in source %>
3
+ .<%= options[:name] %>-<%= svg.name %>,
4
+ .<%= options[:name] %>-<%= svg.name %>-before:before,
5
+ .<%= options[:name] %>-<%= svg.name %>-after:after {
6
+ background-image: url(data:image/svg+xml;base64,<%= svg.base64 %>);
7
+ <%- if svg.has_dimensions? -%>
8
+ width: <%= svg.width %>;
9
+ height: <%= svg.height %>;
10
+ <%- end -%>
11
+ }
12
+ <% end %>
@@ -0,0 +1,13 @@
1
+ module SvgSprite
2
+ module Template
3
+ class CSS
4
+ def template
5
+ @template ||= File.read("#{__dir__}/css.erb")
6
+ end
7
+
8
+ def call(source, options)
9
+ ERB.new(template, nil, "-").result binding
10
+ end
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,24 @@
1
+ // Generated by sprite_svg v<%= SvgSprite::VERSION %> at <%= Time.now %>
2
+ $<%= options[:name] %>-names: (<%= names(source) %>);
3
+
4
+ @mixin <%= options[:name] %>-before($name) {
5
+ &:before {
6
+ @extend %<%= options[:name] %>-#{$name};
7
+ }
8
+ }
9
+
10
+ @mixin <%= options[:name] %>-after($name) {
11
+ &:after {
12
+ @extend %<%= options[:name] %>-#{$name};
13
+ }
14
+ }
15
+
16
+ <% for svg in source %>
17
+ %<%= options[:name] %>-<%= svg.name %> {
18
+ background-image: url(data:image/svg+xml;base64,<%= svg.base64 %>);
19
+ <%- if svg.has_dimensions? -%>
20
+ width: <%= svg.width %>;
21
+ height: <%= svg.height %>;
22
+ <%- end -%>
23
+ }
24
+ <%- end -%>
@@ -0,0 +1,19 @@
1
+ module SvgSprite
2
+ module Template
3
+ class SCSS
4
+ def template
5
+ @template ||= File.read("#{__dir__}/scss.erb")
6
+ end
7
+
8
+ def call(source, options)
9
+ ERB.new(template, nil, "-").result binding
10
+ end
11
+
12
+ private
13
+
14
+ def names(source)
15
+ source.to_a.map(&:name).join(", ")
16
+ end
17
+ end
18
+ end
19
+ end
@@ -1,3 +1,3 @@
1
1
  module SvgSprite
2
- VERSION = "0.0.0"
2
+ VERSION = "0.1.0"
3
3
  end
data/lib/svg_sprite.rb CHANGED
@@ -1,5 +1,39 @@
1
- require "svg_sprite/version"
2
-
3
1
  module SvgSprite
4
- # Your code goes here...
2
+ require "erb"
3
+ require "base64"
4
+ require "svg_optimizer"
5
+ require "thor"
6
+
7
+ OUTPUT_FORMATS = %w[scss css].freeze
8
+ require "svg_sprite/cli"
9
+ require "svg_sprite/version"
10
+ require "svg_sprite/template/scss"
11
+ require "svg_sprite/template/css"
12
+ require "svg_sprite/sprite"
13
+ require "svg_sprite/source"
14
+ require "svg_sprite/svg"
15
+
16
+ TEMPLATES = {
17
+ "scss" => Template::SCSS.new,
18
+ "css" => Template::CSS.new
19
+ }
20
+
21
+ def self.create(options)
22
+ Sprite.new(
23
+ Source.new(options[:source]),
24
+ find_template(options[:format]),
25
+ options
26
+ )
27
+ end
28
+
29
+ def self.export(options)
30
+ FileUtils.mkdir_p(File.dirname(options[:output]))
31
+ File.open(options[:output], "w") do |file|
32
+ file << create(options).render
33
+ end
34
+ end
35
+
36
+ def self.find_template(format)
37
+ TEMPLATES[format] || fail("Invalid output format.")
38
+ end
5
39
  end
data/svg_sprite.gemspec CHANGED
@@ -16,7 +16,13 @@ Gem::Specification.new do |spec|
16
16
  spec.executables = spec.files.grep(%r{^exe/}) {|f| File.basename(f) }
17
17
  spec.require_paths = ["lib"]
18
18
 
19
+ spec.add_dependency "svg_optimizer"
20
+ spec.add_dependency "nokogiri"
21
+ spec.add_dependency "thor"
22
+
19
23
  spec.add_development_dependency "bundler", "~> 1.11"
20
24
  spec.add_development_dependency "rake", "~> 10.0"
21
25
  spec.add_development_dependency "minitest", "~> 5.0"
26
+ spec.add_development_dependency "minitest-utils"
27
+ spec.add_development_dependency "pry-meta"
22
28
  end
metadata CHANGED
@@ -1,15 +1,57 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: svg_sprite
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.0
4
+ version: 0.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nando Vieira
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2015-12-28 00:00:00.000000000 Z
11
+ date: 2015-12-29 00:00:00.000000000 Z
12
12
  dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: svg_optimizer
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '0'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: '0'
27
+ - !ruby/object:Gem::Dependency
28
+ name: nokogiri
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ">="
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: thor
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - ">="
46
+ - !ruby/object:Gem::Version
47
+ version: '0'
48
+ type: :runtime
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - ">="
53
+ - !ruby/object:Gem::Version
54
+ version: '0'
13
55
  - !ruby/object:Gem::Dependency
14
56
  name: bundler
15
57
  requirement: !ruby/object:Gem::Requirement
@@ -52,10 +94,39 @@ dependencies:
52
94
  - - "~>"
53
95
  - !ruby/object:Gem::Version
54
96
  version: '5.0'
97
+ - !ruby/object:Gem::Dependency
98
+ name: minitest-utils
99
+ requirement: !ruby/object:Gem::Requirement
100
+ requirements:
101
+ - - ">="
102
+ - !ruby/object:Gem::Version
103
+ version: '0'
104
+ type: :development
105
+ prerelease: false
106
+ version_requirements: !ruby/object:Gem::Requirement
107
+ requirements:
108
+ - - ">="
109
+ - !ruby/object:Gem::Version
110
+ version: '0'
111
+ - !ruby/object:Gem::Dependency
112
+ name: pry-meta
113
+ requirement: !ruby/object:Gem::Requirement
114
+ requirements:
115
+ - - ">="
116
+ - !ruby/object:Gem::Version
117
+ version: '0'
118
+ type: :development
119
+ prerelease: false
120
+ version_requirements: !ruby/object:Gem::Requirement
121
+ requirements:
122
+ - - ">="
123
+ - !ruby/object:Gem::Version
124
+ version: '0'
55
125
  description: Create SVG sprites using data URIs.
56
126
  email:
57
127
  - fnando.vieira@gmail.com
58
- executables: []
128
+ executables:
129
+ - svg_sprite
59
130
  extensions: []
60
131
  extra_rdoc_files: []
61
132
  files:
@@ -66,7 +137,25 @@ files:
66
137
  - LICENSE.txt
67
138
  - README.md
68
139
  - Rakefile
140
+ - bin/console
141
+ - bin/setup
142
+ - examples/README.md
143
+ - examples/index.html
144
+ - examples/source/a/blue-square.svg
145
+ - examples/source/a/orange-square.svg
146
+ - examples/source/b/green-square.svg
147
+ - examples/source/b/yellow-square.svg
148
+ - examples/source/scss.scss
149
+ - exe/svg_sprite
69
150
  - lib/svg_sprite.rb
151
+ - lib/svg_sprite/cli.rb
152
+ - lib/svg_sprite/source.rb
153
+ - lib/svg_sprite/sprite.rb
154
+ - lib/svg_sprite/svg.rb
155
+ - lib/svg_sprite/template/css.erb
156
+ - lib/svg_sprite/template/css.rb
157
+ - lib/svg_sprite/template/scss.erb
158
+ - lib/svg_sprite/template/scss.rb
70
159
  - lib/svg_sprite/version.rb
71
160
  - svg_sprite.gemspec
72
161
  homepage: https://github.com/fnando/svg_sprite