diff --git a/.template/addons/svgeez/.github/wiki/Managing-SVG-Icons.md b/.template/addons/svgeez/.github/wiki/Managing-SVG-Icons.md new file mode 100644 index 00000000..2d0be852 --- /dev/null +++ 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 svgo@1.3.2 + ``` + +## 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 + + <%= inline_svg_tag 'icon-sprite.svg' %> + + ``` +- 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: {} %> + + + <%= 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 new file mode 100644 index 00000000..8472ac0e --- /dev/null +++ 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 new file mode 100644 index 00000000..5a443a30 --- /dev/null +++ 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 new file mode 100755 index 00000000..e9937d8b --- /dev/null +++ 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 new file mode 100644 index 00000000..1455f714 --- /dev/null +++ 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 new file mode 100644 index 00000000..3b2a658c --- /dev/null +++ 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 new file mode 100644 index 00000000..536e91d0 --- /dev/null +++ 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 new file mode 100644 index 00000000..1f1f3e1c --- /dev/null +++ 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 index 83660a38..4b4c2c6e 100644 --- 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__