svg_sprite 0.0.0 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 56240f54b2d04dec2f7d0e0f4085736bb0a4734d
-  data.tar.gz: a339f5a4726ae7bd24c1f4f4ddf0ae28e04521f3
+  metadata.gz: 034825d7337c6cb0e9d1c159d2f90a2754278fc8
+  data.tar.gz: 33c7621c2d8940ccb14d0b507f62e4a217759bc4
 SHA512:
-  metadata.gz: fc97b8397d99a70ed3ccd03ff43539056ff81df7da6accf98b596555f3967aef4fb8a9399e97d956cc4720c83b0a2f200f923c26b9594c5ec19445b33750a8b7
-  data.tar.gz: dae6d679f4faec94a89c99ad18f06ab32946b02b27485cc0d4fedf094d5abb4c480490336abf03c2527227973d722800e6055b36d39f35af58d4464c5f3df6ee
+  metadata.gz: 3a64803c8c087f1f67a5109ec30144f1634b894317a5d0343d3b6b62f5ea1810a81207e0f606e067fab2a1838c5ae3c463fb727e7aa39402b5d806ee27b3c3c1
+  data.tar.gz: a03e9f43ec6eb363fbbf5978951199fef18d0726b58263ef48f45da137789841706b23658f74a4ced563bc54608c883c0a2cac683eb1c3025dc683198e56ed62

data/.gitignore

@@ -7,3 +7,6 @@
 /pkg/
 /spec/reports/
 /tmp/
+.sass-cache
+/examples/dist
+/examples/source/_icons.scss

data/README.md

@@ -1,28 +1,67 @@
 # SvgSprite
 
-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.
-
-TODO: Delete this and the text above, and describe your gem
+Create SVG sprites by embedding images into CSS using data URIs.
 
 ## Installation
 
-Add this line to your application's Gemfile:
+    $ gem install svg_sprite
+
+## Usage
+
+### Sass support
+
+To create a sprite:
 
-```ruby
-gem 'svg_sprite'
+```
+$ svg_sprite -s images/icons -o styles/_icons.scss -n icons
 ```
 
-And then execute:
+Let's say the `images/icons` directory has a file called `user.svg`. The command above will create some mixins and placeholders.
 
-    $ bundle
+```
+// this variable holds all image names
+$icons-names
 
-Or install it yourself as:
+// this placeholder sets a background image
+%icons-user
 
-    $ gem install svg_sprite
+// this mixin will set the background image on the element's `:before` pseudo-element.
+@include icons-before("user");
 
-## Usage
+// this mixin will set the background image on the element's `:after` pseudo-element.
+@include icons-after("user");
+```
+
+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.
 
-TODO: Write usage instructions here
+```scss
+@each $image in $icons-names {
+  .my-class-for-#{$image} {
+    @extend %icons-#{$image};
+  }
+}
+```
+
+### CSS support
+
+To create a sprite:
+
+```
+$ svg_sprite -s images/icons -o styles/_icons.css -n icons
+```
+
+Let's say the `images/icons` directory has a file called `user.svg`. The command above will create some classes.
+
+```
+// this class will set the background image on the element.
+.icons-user
+
+// this class will set the background image on the element's `:before` pseudo-element.
+.icons-user-before
+
+// this mixin will set the background image on the element's `:after` pseudo-element.
+.icons-user-after
+```
 
 ## Development
 

data/Rakefile

@@ -4,7 +4,7 @@ require "rake/testtask"
 Rake::TestTask.new(:test) do |t|
   t.libs << "test"
   t.libs << "lib"
-  t.test_files = FileList['test/**/*_test.rb']
+  t.test_files = FileList["test/**/*_test.rb"]
 end
 
-task :default => :spec
+task :default => :test

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "svg_sprite"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/examples/README.md

@@ -0,0 +1,19 @@
+# Exporting Sass files
+
+Run this command to export the sprite:
+
+```
+RUBYOPT="-I./lib" ./exe/svg_sprite generate -s examples/source -o examples/source/_icons.scss
+```
+
+Then run this command to export the styles:
+
+````
+scss examples/source/scss.scss examples/dist/scss.css
+````
+
+# Exporting vanilla CSS
+
+```
+RUBYOPT="-I./lib" ./exe/svg_sprite generate -s examples/source -o examples/dist/css.css
+```

data/examples/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <link rel="stylesheet" href="dist/scss.css">
+  <link rel="stylesheet" href="dist/css.css">
+
+  <style>
+    [class*="after"]:after,
+    [class*="before"]:before {
+      content: "";
+      display: inline-block;
+    }
+  </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>
+</body>
+</html>

data/examples/source/a/blue-square.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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">
+    <!-- Generator: Sketch 3.4.4 (17248) - http://www.bohemiancoding.com/sketch -->
+    <title>Rectangle 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <rect id="Rectangle-1" fill="#4990E2" sketch:type="MSShapeGroup" x="0" y="0" width="25" height="25"></rect>
+    </g>
+</svg>

data/examples/source/a/orange-square.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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">
+    <!-- Generator: Sketch 3.4.4 (17248) - http://www.bohemiancoding.com/sketch -->
+    <title>Rectangle 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <rect id="Rectangle-1" fill="#F6A623" sketch:type="MSShapeGroup" x="0" y="0" width="25" height="25"></rect>
+    </g>
+</svg>

data/examples/source/b/green-square.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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">
+    <!-- Generator: Sketch 3.4.4 (17248) - http://www.bohemiancoding.com/sketch -->
+    <title>Rectangle 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <rect id="Rectangle-1" fill="#7ED321" sketch:type="MSShapeGroup" x="0" y="0" width="25" height="25"></rect>
+    </g>
+</svg>

data/examples/source/b/yellow-square.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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">
+    <!-- Generator: Sketch 3.4.4 (17248) - http://www.bohemiancoding.com/sketch -->
+    <title>Rectangle 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <rect id="Rectangle-1" fill="#F8E81C" sketch:type="MSShapeGroup" x="0" y="0" width="25" height="25"></rect>
+    </g>
+</svg>

data/examples/source/scss.scss

@@ -0,0 +1,13 @@
+@import "./icons";
+
+.sass-after {
+  @include sprite-after("blue-square");
+}
+
+.sass-before {
+  @include sprite-before("orange-square");
+}
+
+.sass-inner {
+  @extend %sprite-green-square;
+}

data/exe/svg_sprite

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+require "svg_sprite"
+SvgSprite::CLI.start

data/lib/svg_sprite/cli.rb

@@ -0,0 +1,38 @@
+module SvgSprite
+  class CLI < Thor
+    check_unknown_options!
+
+    def self.exit_on_failure?
+      true
+    end
+
+    desc "version", "Display svg_sprite version"
+    map %w[-v --version] => :version
+
+    def version
+      say SvgSprite::VERSION
+    end
+
+    desc "generate", "Generate the SVG sprite by embedding the images as data URIs."
+    option :source, aliases: %w[-s], required: true, desc: "The source directory. Will match SOURCE/**/*.svg."
+    option :output, aliases: %w[-o], required: true, desc: "The output file. Must be a file with a known format extension (#{OUTPUT_FORMATS.join(", ")})"
+    option :name, aliases: %w[-n], default: "sprite", desc: "The sprite name. This will be used as the variable for dynamic files."
+    def generate
+      format = File.extname(options["output"])[1..-1]
+      fail Error, "ERROR: invalid output extension. Must be one of #{OUTPUT_FORMATS.join("|")}." unless valid_format?(format)
+
+      SvgSprite.export(
+        source: File.expand_path(options["source"]),
+        output: File.expand_path(options["output"]),
+        format: format,
+        name: options["name"]
+      )
+    end
+
+    private
+
+    def valid_format?(format)
+      OUTPUT_FORMATS.include?(format)
+    end
+  end
+end

data/lib/svg_sprite/source.rb

@@ -0,0 +1,17 @@
+module SvgSprite
+  class Source
+    def initialize(directory)
+      @directory = directory
+    end
+
+    def each(&block)
+      to_a.each(&block)
+    end
+
+    def to_a
+      Dir["#{@directory}/**/*.svg"].map do |file|
+        SVG.new(file)
+      end
+    end
+  end
+end

data/lib/svg_sprite/sprite.rb

@@ -0,0 +1,13 @@
+module SvgSprite
+  class Sprite
+    def initialize(source, template, options)
+      @source = source
+      @template = template
+      @options = options
+    end
+
+    def render
+      @template.call(@source, @options)
+    end
+  end
+end

data/lib/svg_sprite/svg.rb

@@ -0,0 +1,45 @@
+module SvgSprite
+  class SVG
+    attr_reader :path
+
+    def initialize(path)
+      @path = path
+    end
+
+    def has_dimensions?
+      width && height
+    end
+
+    def svg
+      @svg ||= xml.css("svg").first
+    end
+
+    def width
+      svg["width"]
+    end
+
+    def height
+      svg["height"]
+    end
+
+    def xml
+      @xml ||= Nokogiri::XML(contents)
+    end
+
+    def contents
+      @contents ||= File.read(path)
+    end
+
+    def optimized
+      @optimized ||= SvgOptimizer.optimize(contents)
+    end
+
+    def base64
+      Base64.strict_encode64(optimized)
+    end
+
+    def name
+      File.basename(path, ".*")
+    end
+  end
+end

data/lib/svg_sprite/template/css.erb

@@ -0,0 +1,12 @@
+/* Generated by sprite_svg v<%= SvgSprite::VERSION %> at <%= Time.now %> */
+<% for svg in source %>
+.<%= options[:name] %>-<%= svg.name %>,
+.<%= options[:name] %>-<%= svg.name %>-before:before,
+.<%= options[:name] %>-<%= svg.name %>-after:after {
+  background-image: url(data:image/svg+xml;base64,<%= svg.base64 %>);
+  <%- if svg.has_dimensions? -%>
+  width: <%= svg.width %>;
+  height: <%= svg.height %>;
+  <%- end -%>
+}
+<% end %>

data/lib/svg_sprite/template/css.rb

@@ -0,0 +1,13 @@
+module SvgSprite
+  module Template
+    class CSS
+      def template
+        @template ||= File.read("#{__dir__}/css.erb")
+      end
+
+      def call(source, options)
+        ERB.new(template, nil, "-").result binding
+      end
+    end
+  end
+end

data/lib/svg_sprite/template/scss.erb

@@ -0,0 +1,24 @@
+// Generated by sprite_svg v<%= SvgSprite::VERSION %> at <%= Time.now %>
+$<%= options[:name] %>-names: (<%= names(source) %>);
+
+@mixin <%= options[:name] %>-before($name) {
+  &:before {
+    @extend %<%= options[:name] %>-#{$name};
+  }
+}
+
+@mixin <%= options[:name] %>-after($name) {
+  &:after {
+    @extend %<%= options[:name] %>-#{$name};
+  }
+}
+
+<% for svg in source %>
+%<%= options[:name] %>-<%= svg.name %> {
+  background-image: url(data:image/svg+xml;base64,<%= svg.base64 %>);
+  <%- if svg.has_dimensions? -%>
+  width: <%= svg.width %>;
+  height: <%= svg.height %>;
+  <%- end -%>
+}
+<%- end -%>

data/lib/svg_sprite/template/scss.rb

@@ -0,0 +1,19 @@
+module SvgSprite
+  module Template
+    class SCSS
+      def template
+        @template ||= File.read("#{__dir__}/scss.erb")
+      end
+
+      def call(source, options)
+        ERB.new(template, nil, "-").result binding
+      end
+
+      private
+
+      def names(source)
+        source.to_a.map(&:name).join(", ")
+      end
+    end
+  end
+end

data/lib/svg_sprite/version.rb

@@ -1,3 +1,3 @@
 module SvgSprite
-  VERSION = "0.0.0"
+  VERSION = "0.1.0"
 end

data/lib/svg_sprite.rb

@@ -1,5 +1,39 @@
-require "svg_sprite/version"
-
 module SvgSprite
-  # Your code goes here...
+  require "erb"
+  require "base64"
+  require "svg_optimizer"
+  require "thor"
+
+  OUTPUT_FORMATS = %w[scss css].freeze
+  require "svg_sprite/cli"
+  require "svg_sprite/version"
+  require "svg_sprite/template/scss"
+  require "svg_sprite/template/css"
+  require "svg_sprite/sprite"
+  require "svg_sprite/source"
+  require "svg_sprite/svg"
+
+  TEMPLATES = {
+    "scss" => Template::SCSS.new,
+    "css"  => Template::CSS.new
+  }
+
+  def self.create(options)
+    Sprite.new(
+      Source.new(options[:source]),
+      find_template(options[:format]),
+      options
+    )
+  end
+
+  def self.export(options)
+    FileUtils.mkdir_p(File.dirname(options[:output]))
+    File.open(options[:output], "w") do |file|
+      file << create(options).render
+    end
+  end
+
+  def self.find_template(format)
+    TEMPLATES[format] || fail("Invalid output format.")
+  end
 end

data/svg_sprite.gemspec

@@ -16,7 +16,13 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) {|f| File.basename(f) }
   spec.require_paths = ["lib"]
 
+  spec.add_dependency "svg_optimizer"
+  spec.add_dependency "nokogiri"
+  spec.add_dependency "thor"
+
   spec.add_development_dependency "bundler", "~> 1.11"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "minitest", "~> 5.0"
+  spec.add_development_dependency "minitest-utils"
+  spec.add_development_dependency "pry-meta"
 end

metadata

@@ -1,15 +1,57 @@
 --- !ruby/object:Gem::Specification
 name: svg_sprite
 version: !ruby/object:Gem::Version
-  version: 0.0.0
+  version: 0.1.0
 platform: ruby
 authors:
 - Nando Vieira
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-12-28 00:00:00.000000000 Z
+date: 2015-12-29 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: svg_optimizer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: nokogiri
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: thor
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -52,10 +94,39 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: minitest-utils
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: pry-meta
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Create SVG sprites using data URIs.
 email:
 - fnando.vieira@gmail.com
-executables: []
+executables:
+- svg_sprite
 extensions: []
 extra_rdoc_files: []
 files:
@@ -66,7 +137,25 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- bin/console
+- bin/setup
+- examples/README.md
+- examples/index.html
+- examples/source/a/blue-square.svg
+- examples/source/a/orange-square.svg
+- examples/source/b/green-square.svg
+- examples/source/b/yellow-square.svg
+- examples/source/scss.scss
+- exe/svg_sprite
 - lib/svg_sprite.rb
+- lib/svg_sprite/cli.rb
+- lib/svg_sprite/source.rb
+- lib/svg_sprite/sprite.rb
+- lib/svg_sprite/svg.rb
+- lib/svg_sprite/template/css.erb
+- lib/svg_sprite/template/css.rb
+- lib/svg_sprite/template/scss.erb
+- lib/svg_sprite/template/scss.rb
 - lib/svg_sprite/version.rb
 - svg_sprite.gemspec
 homepage: https://github.com/fnando/svg_sprite