raybrownco · July 10, 2021 13:37 · Apr 10, 2018 · Apr 10, 2018 · Sep 30, 2015
diff --git a/image_helpers.rb b/image_helpers.rb
@@ -17,10 +17,18 @@
 # <%= inline_svg "name/of/file.svg" %>
 # ```
 #
-# The helper also allows for CSS classes to be added:
+# The helper also allows you to pass attributes to add to the SVG tag, like so:
 #
+# Input:
 # ```
-# <%= inline_svg "name/of/file.svg", class: "my-addl-class" %>
+# <%= inline_svg "name/of/file.svg", class: "foo", data: {bar: "baz"} %>
+# ```
+#
+# Output:
+# ```
+# <svg <!-- existing attributes --> class="foo" data-bar="baz">
+#   <!-- SVG contents -->
+# </svg>
 # ```
 #
 # Acknowledgements and Contributors

diff --git a/image_helpers.rb b/image_helpers.rb
@@ -1,51 +1,100 @@
 # Middleman - Inline SVG Helper
 # ------------------------------------------------------------------------------
+#
+# Installation
+# ------------
 # 1. Save this file at `[project_root]/helpers/image_helpers.rb`
-# 2. Restart your local Middleman server if it's running
-# 3. Embed SVG files into your template files like so:
+# 2. Open the project's Gemfile and add this line: `gem "oga"`
+# 3. Run `bundle install` from the command line
+#
+# Note: Restart your local Middleman server (if it's running) before continuing
+#
+# Usage
+# -----
+# Embed SVG files into your template files like so:
+#
+# ```
+# <%= inline_svg "name/of/file.svg" %>
+# ```
+#
+# The helper also allows for CSS classes to be added:
 #
-#      <%= inline_svg("name/of/file.svg") %>
+# ```
+# <%= inline_svg "name/of/file.svg", class: "my-addl-class" %>
+# ```
 #
-#    The helper also allows for CSS classes to be added:
+# Acknowledgements and Contributors
+# --------------------------
+# This was initally adapted from the work of James Martin
+# and Steven Harley, which you can read more about here:
+# https://robots.thoughtbot.com/organized-workflow-for-svg
 #
-#      <%= inline_svg("name/of/file.svg", class: "my-addl-class") %>
+# Further improvements were made based on contributions by:
 #
+# * Cecile Veneziani (@cveneziani)
+# * Allan White (@allanwhite)
+#
+# Thanks for improving this helper! Have questions or concerns?
+# Feel free to fork the Gist or comment on it here:
+# https://gist.github.com/bitmanic/0047ef8d7eaec0bf31bb
 module ImageHelpers
+  def inline_svg(relative_image_path, optional_attributes = {})
+    image_path = File.join(config[:source], config[:images_dir], relative_image_path)
+
+    # If the image was found...
+    if File.exists?(image_path)
+      # Open the image
+      image = File.open(image_path, 'r') { |f| f.read }
+
+      # Return the image if no optional attributes were passed in
+      return image if optional_attributes.empty?
+
+      # Otherwise, parse the image
+      document = Oga.parse_xml(image)
+      svg      = document.css('svg').first
+
+      # Then, add the attributes
+      # NOTE: This allows for hash-based values, but we're only going one level
+      #       deep right now. If you know a great way to dig `N` levels deeper,
+      #       feel free to post about it on the Gist.
+      optional_attributes.each do |attribute, value|
+        case value
 
-  # Embed SVG images inline within a Middleman template.
-  # ---
-  # Adapted from the work of James Martin and Steven Harley.
-  # Reference: https://robots.thoughtbot.com/organized-workflow-for-svg
-  def inline_svg(filename, options = {})
-    asset = sprockets.find_asset(filename)
+        when Hash
+          value.each do |subattribute, subvalue|
+            unless subvalue.class == Hash
+              svg.set(
+                "#{attribute} #{subattribute}".parameterize,
+                subvalue.html_safe
+              )
+            end
+          end
 
-    # If the file wasn't found, embed error SVG
-    if asset.nil?
+        else
+          svg.set(attribute.to_sym, value.html_safe)
+
+        end
+      end
+
+      # Finally, return the image
+      document.to_xml
+
+    # If the file wasn't found...
+    else
+      # Embed an inline SVG image with an error message
       %(
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 30"
           width="400px" height="30px"
         >
           <text font-size="16" x="8" y="20" fill="#cc0000">
-            Error: '#{filename}' could not be found.
+            Error: '#{relative_image_path}' could not be found.
           </text>
           <rect
             x="1" y="1" width="398" height="28" fill="none"
             stroke-width="1" stroke="#cc0000"
           />
         </svg>
       )
-
-    # If the file was found, parse it, add optional classes, and then embed it
-    else
-      file = asset.source.force_encoding("UTF-8")
-      doc = Nokogiri::HTML::DocumentFragment.parse file
-      svg = doc.at_css "svg"
-
-      if options[:class].present?
-        svg["class"] = options[:class]
-      end
-
-      doc
     end
   end
 end
diff --git a/image_helpers.rb b/image_helpers.rb
@@ -0,0 +1,51 @@
+# Middleman - Inline SVG Helper
+# ------------------------------------------------------------------------------
+# 1. Save this file at `[project_root]/helpers/image_helpers.rb`
+# 2. Restart your local Middleman server if it's running
+# 3. Embed SVG files into your template files like so:
+#
+#      <%= inline_svg("name/of/file.svg") %>
+#
+#    The helper also allows for CSS classes to be added:
+#
+#      <%= inline_svg("name/of/file.svg", class: "my-addl-class") %>
+#
+module ImageHelpers
+
+  # Embed SVG images inline within a Middleman template.
+  # ---
+  # Adapted from the work of James Martin and Steven Harley.
+  # Reference: https://robots.thoughtbot.com/organized-workflow-for-svg
+  def inline_svg(filename, options = {})
+    asset = sprockets.find_asset(filename)
+
+    # If the file wasn't found, embed error SVG
+    if asset.nil?
+      %(
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 30"
+          width="400px" height="30px"
+        >
+          <text font-size="16" x="8" y="20" fill="#cc0000">
+            Error: '#{filename}' could not be found.
+          </text>
+          <rect
+            x="1" y="1" width="398" height="28" fill="none"
+            stroke-width="1" stroke="#cc0000"
+          />
+        </svg>
+      )
+
+    # If the file was found, parse it, add optional classes, and then embed it
+    else
+      file = asset.source.force_encoding("UTF-8")
+      doc = Nokogiri::HTML::DocumentFragment.parse file
+      svg = doc.at_css "svg"
+
+      if options[:class].present?
+        svg["class"] = options[:class]
+      end
+
+      doc
+    end
+  end
+end
No results found