voltron-svg 0.1.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: f598518413b8870b644060d2513d0b268035abf4
+  data.tar.gz: 80f1438aa4a4e0e380879d52edeb87b5d83e6eba
+SHA512:
+  metadata.gz: 2318d4156adfdc86edb1fcbae14e4890a1d2b094ee7fad3683c3a41c7bfdf244b77d46f8a7aae7dcca4c37431563d562ffd4dc9b7e1cd5890b78f24b087fcfa1
+  data.tar.gz: 2b3a7cf4363959f3201fe2fe2c02ca9a5fff9102610f4167218ed3ff3177209f535def86f6edc615ae754f5177fb99a0664562f8d831acfa264c2ce1b2778477

data/.gitignore

@@ -0,0 +1,13 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+tmp/
+log/
+voltron-*.gem
+*.bak
+.keep

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.3.1
+before_install: gem install bundler -v 1.12.5

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at eric.hainer@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+source 'http://gem.minow.io'
+
+# Specify your gem's dependencies in voltron-svg.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Eric Hainer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,105 @@
+[![Build Status](https://travis-ci.org/ehainer/voltron-svg.svg?branch=master)](https://travis-ci.org/ehainer/voltron-svg)
+
+# Voltron::Svg
+
+For lazy people who just want to work with SVG icons and have fallback images created for them.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'voltron-svg'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install voltron-svg
+
+Then run the following to create the voltron.rb initializer (if not exists already) and add the svg config:
+
+    $ rails g voltron:svg:install
+
+To implement the built in svg injector, include the following in `application.js`
+
+```
+//= require voltron-svg
+```
+
+The built in svg injector utilizes Iconic's [SVGInjector](https://github.com/iconic/SVGInjector) library. Refer to the github page for documentation, but note that Voltron SVG does not currently provide a way to alter the config, as it's designed to work with the markup that is output by Voltron SVG by default. See below for example:
+
+```html
+<img width="150" height="150" alt="anchor" data-svg="true" data-size="150x150" data-fallback="/assets/anchor.150x150.TEAL-8cf90f05009ceff4967786502d3c840ef14a79dcb40fa84b156c8ec94e35dfeb.png" src="/assets/anchor.TEAL-f982442b37f0c6c919e15d015d1d0ed9e8c4647116ae4a849ce48b9f7e315c13.svg">
+```
+
+If however you desire more control over the SVG injection process, feel free to not include the `//= require voltron-svg` in application.js, and then roll your own implementation. All tags output by Voltron SVG will follow the same format as the above markup, so you should have access to everything you'd need to do... whatever.
+
+## Usage
+
+The following assumes the presence of the file `phone.svg` in the `Voltron.config.svg.source_directory` path.
+
+Voltron SVG adds the method `svg_tag` to the view helpers, so in your views you can display an SVG with an identical PNG as a fallback image simple by writing:
+
+```erb
+<div class="contact">
+  <%= svg_tag :phone %>
+  <span>Call This Number</span>
+</div>
+```
+
+Or specify some options to customize the output:
+
+```erb
+<div class="contact">
+  <%= svg_tag :phone, color: :teal, size: "50x50", quality: 100 %>
+  <span>Call This Number</span>
+</div>
+```
+
+Or use in SASS by writing:
+
+```sass
+.contact {
+  width: 50px;
+  height: 50px;
+  background-image: svg-icon(phone, $color: teal, $quality: 100, $size: "50x50");
+  background-repeat: no-repeat;
+}
+```
+
+If a color is specified, Voltron SVG will create a duplicate SVG file of the icon you want to display, and replace the color of all fills and paths with the color you defined. Any color format that would be valid in CSS is valid for the value of the color option, including, but not limited to: `#323A45`, `rebeccapurple`, or `rgba(100, 100, 100, 0.7)`
+
+For reasons that may or may not be obvious, only the entire color of the SVG can be specified. Multi-color SVG's will receive a "color flood" if a color is provided, because sadly I don't have a way to write code for "make this line this color, but this area this color, and that line another color..." given an abstract SVG file that can have any number of path's and areas to color.
+
+## Options
+
+Possible options for `svg_tag` and `svg-icon`
+
+* :color -> The color, silly
+* :quality -> The generated PNG quality. Default: 90
+* :width -> The width, duh
+* :height -> The height, duh
+* :size -> Use is same as in `image_tag`, could be specified as "50x50" or just "50" (this option takes priority if :width and :height are also provided)
+* :fallback -> If you don't want it to use the default generated fallback image, provide a specific image name, i.e. - "my-more-awesome-fallback.png"
+* :extension -> Likely not needed, but if you call `svg_tag :phone` but for some reason it doesn't have a *.svg extension, you can call `svg_tag :phone, extension: "flub"` to have it find "phone.flub" instead. Or just write `svg_tag "phone.flub"` in the first place.
+
+All other options will be passed to the internal `image_tag` call, so you may also provide options like `:alt`, `:class`, or `:data` and it will be present on the generated <img /> tag. Note that Voltron SVG adds it's own `data-*` attributes (data-svg, data-size, data-fallback to be exact), but they will be merged with any data hash you provide when calling svg_tag. So basically, the 'size', 'svg', and 'fallback' data-* attributes are reserved, but any other data param is fair game.
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` 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).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/ehainer/voltron-svg. 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).
+

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/assets/javascripts/voltron/svg-injector.js

@@ -0,0 +1,9 @@
+/**
+ * SVGInjector v1.1.3 - Fast, caching, dynamic inline SVG DOM injection library
+ * https://github.com/iconic/SVGInjector
+ *
+ * Copyright (c) 2014-2015 Waybury <hello@waybury.com>
+ * @license MIT
+ */
+!function(t,e){"use strict";function r(t){t=t.split(" ");for(var e={},r=t.length,n=[];r--;)e.hasOwnProperty(t[r])||(e[t[r]]=1,n.unshift(t[r]));return n.join(" ")}var n="file:"===t.location.protocol,i=e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"),o=Array.prototype.forEach||function(t,e){if(void 0===this||null===this||"function"!=typeof t)throw new TypeError;var r,n=this.length>>>0;for(r=0;n>r;++r)r in this&&t.call(e,this[r],r,this)},a={},l=0,s=[],u=[],c={},f=function(t){return t.cloneNode(!0)},p=function(t,e){u[t]=u[t]||[],u[t].push(e)},d=function(t){for(var e=0,r=u[t].length;r>e;e++)!function(e){setTimeout(function(){u[t][e](f(a[t]))},0)}(e)},v=function(e,r){if(void 0!==a[e])a[e]instanceof SVGSVGElement?r(f(a[e])):p(e,r);else{if(!t.XMLHttpRequest)return r("Browser does not support XMLHttpRequest"),!1;a[e]={},p(e,r);var i=new XMLHttpRequest;i.onreadystatechange=function(){if(4===i.readyState){if(404===i.status||null===i.responseXML)return r("Unable to load SVG file: "+e),n&&r("Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver."),r(),!1;if(!(200===i.status||n&&0===i.status))return r("There was a problem injecting the SVG: "+i.status+" "+i.statusText),!1;if(i.responseXML instanceof Document)a[e]=i.responseXML.documentElement;else if(DOMParser&&DOMParser instanceof Function){var t;try{var o=new DOMParser;t=o.parseFromString(i.responseText,"text/xml")}catch(l){t=void 0}if(!t||t.getElementsByTagName("parsererror").length)return r("Unable to parse SVG file: "+e),!1;a[e]=t.documentElement}d(e)}},i.open("GET",e),i.overrideMimeType&&i.overrideMimeType("text/xml"),i.send()}},h=function(e,n,a,u){var f=e.getAttribute("data-src")||e.getAttribute("src");if(!/\.svg/i.test(f))return void u("Attempted to inject a file with a non-svg extension: "+f);if(!i){var p=e.getAttribute("data-fallback")||e.getAttribute("data-png");return void(p?(e.setAttribute("src",p),u(null)):a?(e.setAttribute("src",a+"/"+f.split("/").pop().replace(".svg",".png")),u(null)):u("This browser does not support SVG and no PNG fallback was defined."))}-1===s.indexOf(e)&&(s.push(e),e.setAttribute("src",""),v(f,function(i){if("undefined"==typeof i||"string"==typeof i)return u(i),!1;var a=e.getAttribute("id");a&&i.setAttribute("id",a);var p=e.getAttribute("title");p&&i.setAttribute("title",p);var d=[].concat(i.getAttribute("class")||[],"injected-svg",e.getAttribute("class")||[]).join(" ");i.setAttribute("class",r(d));var v=e.getAttribute("style");v&&i.setAttribute("style",v);var h=[].filter.call(e.attributes,function(t){return/^data-\w[\w\-]*$/.test(t.name)});o.call(h,function(t){t.name&&t.value&&i.setAttribute(t.name,t.value)});var g,m,b,y,A,w={clipPath:["clip-path"],"color-profile":["color-profile"],cursor:["cursor"],filter:["filter"],linearGradient:["fill","stroke"],marker:["marker","marker-start","marker-mid","marker-end"],mask:["mask"],pattern:["fill","stroke"],radialGradient:["fill","stroke"]};Object.keys(w).forEach(function(t){g=t,b=w[t],m=i.querySelectorAll("defs "+g+"[id]");for(var e=0,r=m.length;r>e;e++){y=m[e].id,A=y+"-"+l;var n;o.call(b,function(t){n=i.querySelectorAll("["+t+'*="'+y+'"]');for(var e=0,r=n.length;r>e;e++)n[e].setAttribute(t,"url(#"+A+")")}),m[e].id=A}}),i.removeAttribute("xmlns:a");for(var x,S,k=i.querySelectorAll("script"),j=[],G=0,T=k.length;T>G;G++)S=k[G].getAttribute("type"),S&&"application/ecmascript"!==S&&"application/javascript"!==S||(x=k[G].innerText||k[G].textContent,j.push(x),i.removeChild(k[G]));if(j.length>0&&("always"===n||"once"===n&&!c[f])){for(var M=0,V=j.length;V>M;M++)new Function(j[M])(t);c[f]=!0}var E=i.querySelectorAll("style");o.call(E,function(t){t.textContent+=""}),e.parentNode.replaceChild(i,e),delete s[s.indexOf(e)],e=null,l++,u(i)}))},g=function(t,e,r){e=e||{};var n=e.evalScripts||"always",i=e.pngFallback||!1,a=e.each;if(void 0!==t.length){var l=0;o.call(t,function(e){h(e,n,i,function(e){a&&"function"==typeof a&&a(e),r&&t.length===++l&&r(l)})})}else t?h(t,n,i,function(e){a&&"function"==typeof a&&a(e),r&&r(1),t=null}):r&&r(0)};"object"==typeof module&&"object"==typeof module.exports?module.exports=exports=g:"function"==typeof define&&define.amd?define(function(){return g}):"object"==typeof t&&(t.SVGInjector=g)}(window,document);
+//# sourceMappingURL=svg-injector.map.js

data/app/assets/javascripts/voltron-svg.js

@@ -0,0 +1,134 @@
+//= require voltron/svg-injector
+
+if(Voltron){
+    Voltron.addModule('SVG', function(){
+        return {
+            initialize: function(){
+                this.inject();
+            },
+
+            getTag: function(svg, image, options){
+                options = $.extend(options, { src: svg, size: '16x16', svg: true, fallback: image });
+                if(/^[0-9]+$/.test(options['size'].toString())) options['size'] = (options['size'] + 'x' + options['size']);
+                var size = options['size'].split('x');
+                if(!options['width']) options['width'] = size[0];
+                if(!options['height']) options['height'] = size[1];
+                return $('<img />', this.getDataAttribute(options, ['size', 'svg', 'fallback']));
+            },
+
+            getDataAttribute: function(options, attributes){
+                for(var i=0; i<attributes.length; i++){
+                    var attr = attributes[i];
+                    if(options[attr]){
+                        options['data-' + attr] = options[attr];
+                        delete options[attr];
+                    }
+                }
+                return options;
+            },
+
+            inject: function(){
+                var svgs = document.querySelectorAll('img[data-svg="true"]:not(.injected-svg)');
+                var options = {
+                    each: function(svg){
+                        if(svg.getAttribute('data-size')){
+                            var dims = svg.getAttribute('data-size').split('x');
+                            svg.setAttribute('width', parseFloat(dims[0]));
+                            svg.setAttribute('height', parseFloat(dims[1]));
+                        }
+                    }
+                };
+                SVGInjector(svgs, options);
+            }
+        };
+    }, true);
+}else{
+    (function(funcName, baseObj) {
+        "use strict";
+        // The public function name defaults to window.docReady
+        // but you can modify the last line of this function to pass in a different object or method name
+        // if you want to put them in a different namespace and those will be used instead of 
+        // window.docReady(...)
+        funcName = funcName || "docReady";
+        baseObj = baseObj || window;
+        var readyList = [];
+        var readyFired = false;
+        var readyEventHandlersInstalled = false;
+        
+        // call this when the document is ready
+        // this function protects itself against being called more than once
+        function ready() {
+            if (!readyFired) {
+                // this must be set to true before we start calling callbacks
+                readyFired = true;
+                for (var i = 0; i < readyList.length; i++) {
+                    // if a callback here happens to add new ready handlers,
+                    // the docReady() function will see that it already fired
+                    // and will schedule the callback to run right after
+                    // this event loop finishes so all handlers will still execute
+                    // in order and no new ones will be added to the readyList
+                    // while we are processing the list
+                    readyList[i].fn.call(window, readyList[i].ctx);
+                }
+                // allow any closures held by these functions to free
+                readyList = [];
+            }
+        }
+        
+        function readyStateChange() {
+            if ( document.readyState === "complete" ) {
+                ready();
+            }
+        }
+        
+        // This is the one public interface
+        // docReady(fn, context);
+        // the context argument is optional - if present, it will be passed
+        // as an argument to the callback
+        baseObj[funcName] = function(callback, context) {
+            // if ready has already fired, then just schedule the callback
+            // to fire asynchronously, but right away
+            if (readyFired) {
+                setTimeout(function() {callback(context);}, 1);
+                return;
+            } else {
+                // add the function and context to the list
+                readyList.push({fn: callback, ctx: context});
+            }
+            // if document already ready to go, schedule the ready function to run
+            // IE only safe when readyState is "complete", others safe when readyState is "interactive"
+            if (document.readyState === "complete" || (!document.attachEvent && document.readyState === "interactive")) {
+                setTimeout(ready, 1);
+            } else if (!readyEventHandlersInstalled) {
+                // otherwise if we don't have event handlers installed, install them
+                if (document.addEventListener) {
+                    // first choice is DOMContentLoaded event
+                    document.addEventListener("DOMContentLoaded", ready, false);
+                    // backup is window load event
+                    window.addEventListener("load", ready, false);
+                } else {
+                    // must be IE
+                    document.attachEvent("onreadystatechange", readyStateChange);
+                    window.attachEvent("onload", ready);
+                }
+                readyEventHandlersInstalled = true;
+            }
+        }
+    })("docReady", window);
+
+    window.injectSVG = function(){
+    	var svgs = document.querySelectorAll('img[data-svg="true"]');
+    	var options = {
+    		each: function(svg){
+                if(svg.getAttribute('data-size')){
+                    var dims = svg.getAttribute('data-size').split('x');
+    				svg.setAttribute('width', parseFloat(dims[0]));
+    				svg.setAttribute('height', parseFloat(dims[1]));
+                }
+    		}
+    	};
+    	SVGInjector(svgs, options);
+    };
+
+    docReady(injectSVG);
+}

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "voltron/svg"
+
+# 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/lib/generators/voltron/svg/install_generator.rb

@@ -0,0 +1,48 @@
+module Voltron
+  module Svg
+    module Generators
+      class InstallGenerator < Rails::Generators::Base
+
+        desc "Add Voltron SVG initializer"
+
+        def inject_initializer
+
+          voltron_initialzer_path = Rails.root.join("config", "initializers", "voltron.rb")
+
+          unless File.exist? voltron_initialzer_path
+            unless system("cd #{Rails.root.to_s} && rails generate voltron:install")
+              puts "Voltron initializer does not exist. Please ensure you have the 'voltron' gem installed and run `rails g voltron:install` to create it"
+              return false
+            end
+          end
+
+          current_initiailzer = File.read voltron_initialzer_path
+
+          unless current_initiailzer.match(Regexp.new(/# === Voltron SVG Configuration ===/))
+            inject_into_file(voltron_initialzer_path, after: "Voltron.setup do |config|\n") do
+<<-CONTENT
+
+  # === Voltron SVG Configuration ===
+
+  # The directory that contains SVG icons from which to create PNG's
+  # config.svg.source_directory = Rails.root.join("app", "assets", "svg")
+
+  # The directory where generated fallback images for SVG's should reside
+  # config.svg.image_directory = Rails.root.join("app", "assets", "images")
+
+  # The environment(s) that svg -> png generation can occur in. Defaults to "development"
+  # Can specify either a single environment or an array of environments. NOT recommended for production
+  # config.svg.build_environment << :development
+
+  # The quality (0-100) of generated PNG's, can be overridden in SASS using:
+  # svg-icon(icon, $quality: 100) or in the view helper:
+  # svg_tag(:icon, quality: 100)
+  # config.svg.quality = 90
+CONTENT
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/voltron/config/svg.rb

@@ -0,0 +1,24 @@
+module Voltron
+  class Config
+
+    def svg
+      @svg ||= Svg.new
+    end
+
+    class Svg
+
+      attr_accessor :build_environment, :source_directory, :image_directory, :quality
+
+      def initialize
+        @quality ||= 90
+        @build_environment ||= [:development]
+        @source_directory ||= Rails.root.join("app", "assets", "svg")
+        @image_directory ||= Rails.root.join("app", "assets", "images")
+      end
+
+      def buildable?
+        [build_environment].flatten.map(&:to_s).include?(Rails.env.to_s)
+      end
+    end
+  end
+end

data/lib/voltron/svg/engine.rb

@@ -0,0 +1,10 @@
+module Voltron
+  module Svg
+    class Engine < Rails::Engine
+      initializer "voltron.svg.initialize" do
+        ::ActionView::Base.send :include, ::Voltron::Svg::ViewHelpers
+        ::Sass::Script::Functions.send :include, ::Voltron::Svg::SassHelpers
+      end
+    end
+  end
+end

data/lib/voltron/svg/tag.rb

@@ -0,0 +1,204 @@
+require "voltron"
+
+module Voltron
+  module Svg
+    class Tag
+
+      include ActionView::Helpers
+
+      def initialize(file, options={})
+        options = options.symbolize_keys
+        @file = file
+        @options = options
+        setup
+      end
+
+      def setup
+        # If a size is specified, extract it's width/height
+        @options[:width], @options[:height] = extract_dimensions(@options.delete(:size)) if @options[:size]
+
+        # Ensure the svg extension is added if a symbol was provided for icon name
+        @options[:extension] ||= :svg if @file.is_a?(Symbol)
+
+        # Set the default quality
+        @options[:quality] ||= Voltron.config.svg.quality
+
+        # Generate the SVG (if custom color) and the corresponding fallback PNG, only if running in environment that allows conversion
+        create_png if Voltron.config.svg.buildable?
+      end
+
+      def image_path
+        # Get the fallback image path, either using the :fallback option if specified, or use the default generated png
+        asset_path (@options[:fallback] || name(:png, size.to_s.downcase, color.upcase))
+      end
+
+      def svg_path
+        asset_path name(@options[:extension], color.upcase)
+      end
+
+      def asset_path(filename)
+        if Rails.application.config.assets.digest && Rails.application.config.assets.compile
+          filename = Rails.application.assets.find_asset(filename).try(:digest_path) || filename
+        end
+
+        File.join(Rails.application.config.assets.prefix, filename)
+      end
+
+      # Return the html <img /> tag with the needed attributes
+      def html
+        image_tag svg_path, attributes
+      end
+
+      def attributes
+        @options[:alt] ||= @file
+        @options[:data] ||= {}
+        @options[:data].merge!({ svg: true, size: size, fallback: image_path })
+        @options.reject { |k,v| [:color, :fallback, :quality, :extension].include?(k) }
+      end
+
+      # Try to get the SVG file
+      def svg
+        begin
+          @svg ||= ::MiniMagick::Image.open(to_svg_path)
+        rescue ::MiniMagick::Error => e
+        rescue ::Errno::ENOENT => e
+          false
+        end
+      end
+
+      # Attempt to get width from specified options, then from the source SVG file itself, and ultimately say the width is 16
+      def width
+        (@options[:width] || svg.try(:width) || 16).to_i
+      end
+
+      # Attempt to get height from specified options, then from the source SVG file itself, and ultimately say the height is 16
+      def height
+        (@options[:height] || svg.try(:height) || 16).to_i
+      end
+
+      # Get the color specified, if any, removing anything that's not alphanumeric for use in the generated filename
+      def color
+        @options[:color].to_s.gsub(/[^\dA-Z]/i, "")
+      end
+
+      def size
+        "#{width}x#{height}"
+      end
+
+      def name(extension = nil, *opts)
+        filename = @file.to_s
+
+        if extension.nil? && (matches = filename.match(/\.(.*)$/i))
+          extension = matches[1]
+        end
+
+        # If called like `svg_tag :my_icon`, convert to "my-icon"
+        # If the filename "my_icon" is actually needed, call `svg_tag "my_icon"` (don't use symbol)
+        filename = filename.dasherize if @file.is_a?(Symbol)
+
+        pieces = filename.split(".").insert(1, opts).flatten
+
+        # Add the extension if it doesn't end with the extension, if nil it will just get removed on the next line
+        pieces << extension unless pieces[-1] == extension.to_s
+
+        # Remove anything that might be empty or nil
+        pieces.reject!(&:blank?)
+
+        # Put all the pieces together, get a name like file.50x50.RED.png
+        pieces.join(".")
+      end
+
+      # The fallback image path for the SVG
+      def fallback_path
+        File.join Voltron.config.svg.image_directory, name(:png, size.to_s.downcase, color.upcase)
+      end
+
+      # The source SVG path
+      def from_svg_path
+        File.join Voltron.config.svg.source_directory, name(@options[:extension])
+      end
+
+      # The SVG we'll ultimately use to generate the PNG, if no color was specified this will be the same as `from_svg_path`
+      def to_svg_path
+        File.join Voltron.config.svg.source_directory, name(@options[:extension], color.upcase)
+      end
+
+      # If a color is specified and we haven't already created the colorized SVG, generate it
+      def create_svg
+        if !color.blank? && !File.exists?(to_svg_path)
+          # Get the svg contents
+          content = File.read(from_svg_path)
+
+          # Set the color of any path/stroke in the svg
+          content.gsub! /fill=\"[^\"]+\"/, "fill=\"#{@options[:color]}\""
+          content.gsub! /stroke=\"[^\"]+\"/, "stroke=\"#{@options[:color]}\""
+
+          # Write the new svg file
+          File.open(to_svg_path, "w") { |f| f.puts content }
+
+          Rails.application.assets_manifest.compile name(:svg, color.upcase)
+
+          Voltron.log "Generated SVG: #{app_path(from_svg_path)} -> #{app_path(to_svg_path)}", "SVG", :light_magenta
+        end
+      end
+
+      # If we haven't done so already, create the PNG from the SVG source file
+      def create_png
+        return false if File.exists?(fallback_path)
+
+        begin
+          # Ensure the SVG we will convert to a PNG exists first
+          create_svg
+
+          # Then convert the SVG to a PNG
+          ::MiniMagick::Tool::Convert.new do |convert|
+            convert.merge! ["-gravity", "center"]
+            convert.merge! ["-background", "none"]
+            convert.merge! ["-quality", @options[:quality]]
+            convert.merge! ["-density", density]
+            convert.merge! ["-resize", size]
+            convert.merge! ["-extent", size]
+            convert << to_svg_path
+            convert << fallback_path
+            convert
+          end
+
+          Rails.application.assets_manifest.compile name(:png, size.to_s.downcase, color.upcase)
+
+          Voltron.log "Generated PNG: #{app_path(to_svg_path)} -> #{app_path(fallback_path)}", "SVG", :light_magenta
+          true
+        rescue ::MiniMagick::Error => e
+          Voltron.log e.message, "SVG", :red
+          false
+        end
+      end
+
+      protected
+
+        # Get the density of the image so the possibly enlarged SVG -> PNG does not look blurry
+        # Basically just the svg's original width (or 1, if an error) multiplied by the largest side
+        def density
+          if width > height
+            "#{(svg.try(:width) || 1)*width}x#{(svg.try(:height) || 1)*width}"
+          else
+            "#{(svg.try(:width) || 1)*height}x#{(svg.try(:height) || 1)*height}"
+          end
+        end
+
+        # Only used for logging, slim down the path to `path` by getting rid of everything leading up to the rails root directory
+        def app_path(path)
+          path.sub(Rails.root.to_s, "")
+        end
+
+        def extract_dimensions(size)
+          size = size.to_s
+          if size =~ %r{\A\d+x\d+\z}
+            size.split("x")
+          elsif size =~ %r{\A\d+\z}
+            [size, size]
+          end
+        end
+
+    end
+  end
+end

data/lib/voltron/svg/version.rb

@@ -0,0 +1,5 @@
+module Voltron
+  module Svg
+    VERSION = "0.1.2"
+  end
+end

data/lib/voltron/svg.rb

@@ -0,0 +1,36 @@
+require "voltron/svg/version"
+require "voltron/svg/tag"
+require "voltron/config/svg"
+require "mini_magick"
+require "sass/rails"
+
+module Voltron
+  module Svg
+
+    module SassHelpers
+      def svg_icon(source, options={})
+        tag = Voltron::Svg::Tag.new(source.value, { extension: :svg }.merge(map_options(options)))
+
+        ::Sass::Script::String.new "url(\"#{tag.image_path}\");\nbackground-image: url(\"#{tag.svg_path}\"), linear-gradient(transparent, transparent);\nbackground-size: #{tag.width}px #{tag.height}px"
+      end
+
+      def map_options(options={})
+        ::Sass::Util.map_hash(options) do |key, value|
+          [key.to_sym, (value.respond_to?(:representation) ? value.representation : (value.respond_to?(:value) ? value.value : value))]
+        end
+      end
+
+      ::Sass::Script::Functions.declare :svg_icon, [:source], var_kwargs: true
+    end
+
+    module ViewHelpers
+      def svg_tag(source, options={})
+        tag = Voltron::Svg::Tag.new(source, options)
+        tag.html
+      end
+    end
+
+  end
+end
+
+require "voltron/svg/engine" if defined?(Rails)

data/voltron-svg.gemspec

@@ -0,0 +1,31 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'voltron/svg/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "voltron-svg"
+  spec.version       = Voltron::Svg::VERSION
+  spec.authors       = ["Eric Hainer"]
+  spec.email         = ["eric@commercekitchen.com"]
+
+  spec.summary       = %q{Adds SVG helpers and on-the-fly generation of fallback images to rails}
+  spec.homepage      = "https://github.com/ehainer/voltron-svg"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "voltron", ">= 0.1.0"
+  spec.add_dependency "mini_magick", ">= 4.4"
+  spec.add_dependency "sass-rails", ">= 5.0"
+
+  spec.add_development_dependency "bundler", "~> 1.12"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec", "~> 3.0"
+  spec.add_development_dependency "rspec-rails", ">= 3.4"
+  spec.add_development_dependency "sqlite3", ">= 1.2"
+  spec.add_development_dependency "simplecov", "0.11.0"
+end

metadata

@@ -0,0 +1,189 @@
+--- !ruby/object:Gem::Specification
+name: voltron-svg
+version: !ruby/object:Gem::Version
+  version: 0.1.2
+platform: ruby
+authors:
+- Eric Hainer
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-10-12 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: voltron
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.1.0
+- !ruby/object:Gem::Dependency
+  name: mini_magick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.4'
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.4'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
+- !ruby/object:Gem::Dependency
+  name: simplecov
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.11.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.11.0
+description: 
+email:
+- eric@commercekitchen.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".travis.yml"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/voltron-svg.js
+- app/assets/javascripts/voltron/svg-injector.js
+- bin/console
+- bin/setup
+- lib/generators/voltron/svg/install_generator.rb
+- lib/voltron/config/svg.rb
+- lib/voltron/svg.rb
+- lib/voltron/svg/engine.rb
+- lib/voltron/svg/tag.rb
+- lib/voltron/svg/version.rb
+- voltron-svg.gemspec
+homepage: https://github.com/ehainer/voltron-svg
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.8
+signing_key: 
+specification_version: 4
+summary: Adds SVG helpers and on-the-fly generation of fallback images to rails
+test_files: []