Add svgeez addon (#445)

* [#425] Add svg sprite addon * [#425] Add svgeez add on in place of svg sprite add on * [#425] add inline_svg gem for svgeez addon, move it to web variant * [#425] Add binary file and change wiki for svgeez addon * [#425] Fix lint * [#425] Update gemfile spec for svgeez addon * [#425] Change svgeez installation location in gemfile * [#425] Change svgeez gem location in gemfile * [#425] Add svgeez github wiki addon if .github directory exists * [#425] Remove unnecessary line from svgeez template * [#425] Add svg helper for svgeez addon * [#425] Fix lint * [#425] Modify svgeez addon test * [#425] Remove gemfile spec for svgeez * [#425] Fix lint * [#425] Change svgeez github wiki sidebar title * [#425] Add svgeez addon's gems inside development group * [#425] Change svgeez addon binary file * [#425] Change svgeez wiki file name * [#425] Remove empty line * [#425] Add inline_svg gem under production group
nimblehq · Jul 26, 2023 · 6c8da12 · 6c8da12
1 parent 613e39b
commit 6c8da12
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 0 deletions.
diff --git a/.template/addons/svgeez/.github/wiki/Managing-SVG-Icons.md b/.template/addons/svgeez/.github/wiki/Managing-SVG-Icons.md
@@ -0,0 +1,35 @@
+From time to time, we need to add new SVG icons to the app. This document describes the steps to do that.
+
+## Gems
+The following 2 gems are used to handle SVG:
+- [svgeez](https://github.com/jgarber623/svgeez): for generating an SVG sprite from a folder of SVG icons. Requires Node.js and SVGO 1.3.2.
+- [inline_svg](https://github.com/jamesmartin/inline_svg): to use inline SVG for styling SVG with CSS
+
+## Node dependencies
+- [svgo](https://www.npmjs.com/package/svgo): Optimizes SVG sprite file size
+  ```sh
+  npm -g install [email protected]
+  ```
+
+## Add a new icon:
+- Export the SVG icon from Figma
+- Add the icon to `app/assets/images/icons` directory.
+- Run the following command to generate the new `app/assets/images/icon-sprite.svg` file which contains all of the icons in the `icons` directory
+  ```sh
+  bin/svg-sprite
+  ```
+
+## Use the new icon
+- Add the `icon-sprite.svg` file to the layout of the page
+  ```erb
+  <body>
+    <%= inline_svg_tag 'icon-sprite.svg' %>
+  </body>
+  ```
+- Use the `svg_tag` provided by the `SvgHelper` (app/helpers/svg_helper.rb) and provided `icon_id` matched with icon file name with prefix `icon-`:
+  ```erb
+  <%= svg_tag icon_id: 'icon-[icon-file-name]', html: {} %>
+
+  <!-- example: -->
+  <%= svg_tag icon_id: 'icon-contacts', html: { class: 'icon' } %>
+  ```
diff --git a/.template/addons/svgeez/.github/wiki/template.rb b/.template/addons/svgeez/.github/wiki/template.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+if Dir.exist?('.github/wiki')
+  use_source_path __dir__
+
+  copy_file 'Managing-SVG-Icons.md', '.github/wiki/Managing-SVG-Icons.md'
+
+  # SVG Sprite
+  insert_into_file '.github/wiki/_Sidebar.md', after: /## Operations.*\n/ do
+    <<~RUBY
+      - [[Managing SVG icons]]
+    RUBY
+  end
+end
diff --git a/.template/addons/svgeez/Gemfile.rb b/.template/addons/svgeez/Gemfile.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# SVG Sprite
+insert_into_file 'Gemfile', after: /gem 'danger'.*\n/ do
+  <<~RUBY
+    gem 'svgeez' # Gem for generating an SVG sprite from a folder of SVG icons.
+  RUBY
+end
+
+# SVG Sprite
+insert_into_file 'Gemfile', after: /gem 'bcrypt'.*\n/ do
+  <<~RUBY
+    gem 'inline_svg' # Use Inline SVG for styling SVG with CSS
+  RUBY
+end
diff --git a/.template/addons/svgeez/bin/svg-sprite b/.template/addons/svgeez/bin/svg-sprite
@@ -0,0 +1,12 @@
+# Generates an SVG sprite from a folder of SVG icons.
+#
+# Uses `svgeez` gem.
+#   https://github.com/jgarber623/svgeez
+#
+# Usage
+#  -s --source:	Path to the folder of source SVGs (defaults to ./_svgeez).
+#  -d --destination:	Path to the destination file or folder (defaults to ./svgeez.svg)
+#  --with-svgo:	Optimize SVG sprite file with SVGO
+
+# Generate the sprite file which includes the `icon-` prefix
+bin/bundle exec svgeez build --prefix icon --source app/assets/images/icons/ --destination app/assets/images/icon-sprite.svg --with-svgo
diff --git a/.template/addons/svgeez/bin/template.rb b/.template/addons/svgeez/bin/template.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+use_source_path __dir__
+
+copy_file 'svg-sprite', 'bin/svg-sprite', mode: :preserve
diff --git a/.template/addons/svgeez/helpers/svg_helper.rb b/.template/addons/svgeez/helpers/svg_helper.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module SvgHelper
+  DEFAULT_SVG_ATTRIBUTES = {
+    width: '16',
+    height: '16'
+  }.freeze
+
+  def svg_tag(html: {}, icon_id: '')
+    svg_attributes = DEFAULT_SVG_ATTRIBUTES.merge(html)
+
+    tag.svg(tag.use(nil, 'xlink:href' => "##{icon_id}"), **svg_attributes)
+  end
+end
diff --git a/.template/addons/svgeez/helpers/template.rb b/.template/addons/svgeez/helpers/template.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+use_source_path __dir__
+
+copy_file 'svg_helper.rb', 'app/helpers/svg_helper.rb'
diff --git a/.template/addons/svgeez/template.rb b/.template/addons/svgeez/template.rb
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+apply '.template/addons/svgeez/Gemfile.rb'
+apply '.template/addons/svgeez/bin/template.rb'
+apply '.template/addons/svgeez/.github/wiki/template.rb'
+apply '.template/addons/svgeez/helpers/template.rb'
diff --git a/.template/variants/web/template.rb b/.template/variants/web/template.rb
@@ -25,6 +25,7 @@ def apply_web_variant!
   apply '.template/addons/bootstrap/template.rb' if yes? install_addon_prompt 'Bootstrap'
   apply '.template/addons/slim/template.rb' if yes? install_addon_prompt 'Slim Template Engine'
   apply '.template/addons/hotwire/template.rb' if yes? install_addon_prompt 'Hotwire'
+  apply '.template/addons/svgeez/template.rb' if yes? install_addon_prompt 'Svgeez'
 
   after_bundle do
     use_source_path __dir__