[#425] Add binary file and change wiki for svgeez addon

nimblehq · Jul 17, 2023 · c412ea6 · c412ea6
1 parent 28e74d4
commit c412ea6
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 0 deletions.
diff --git a/.template/addons/svgeez/.github/wiki/Add-new-svg-icon.md b/.template/addons/svgeez/.github/wiki/Add-new-svg-icon.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
+
+use_source_path __dir__
+
+copy_file 'Add-new-svg-icon.md', '.github/wiki/Add-new-svg-icon.md'
+
+# SVG Sprite
+insert_into_file '.github/wiki/_Sidebar.md', after: /## Operations.*\n/ do
+  <<~RUBY
+
+    - [[Add new svg icon]]
+  RUBY
+end
diff --git a/.template/addons/svgeez/bin/svg-sprite b/.template/addons/svgeez/bin/svg-sprite
@@ -0,0 +1,15 @@
+# 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 --source app/assets/images/icons/ --destination app/assets/images/icon.svg --with-svgo
+
+# Rename the icon.svg to icon-sprite.svg
+mv app/assets/images/icon.svg app/assets/images/icon-sprite.svg
diff --git a/.template/addons/svgeez/bin/template.rb b/.template/addons/svgeez/bin/template.rb
@@ -0,0 +1,6 @@
+
+# frozen_string_literal: true
+
+use_source_path __dir__
+
+copy_file 'svg-sprite', 'bin/svg-sprite', mode: :preserve
diff --git a/.template/addons/svgeez/template.rb b/.template/addons/svgeez/template.rb
@@ -1,3 +1,5 @@
 # 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'