Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add svgeez addon #445

Merged
merged 21 commits into from
Jul 26, 2023
Merged

Add svgeez addon #445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
cda7967
[#425] Add svg sprite addon
mosharaf13 Jul 13, 2023
7be37dd
[#425] Add svgeez add on in place of svg sprite add on
mosharaf13 Jul 13, 2023
28e74d4
[#425] add inline_svg gem for svgeez addon, move it to web variant
mosharaf13 Jul 17, 2023
c412ea6
[#425] Add binary file and change wiki for svgeez addon
mosharaf13 Jul 17, 2023
0ce2ada
[#425] Fix lint
mosharaf13 Jul 17, 2023
c0734c0
[#425] Update gemfile spec for svgeez addon
mosharaf13 Jul 17, 2023
26137e6
[#425] Change svgeez installation location in gemfile
mosharaf13 Jul 17, 2023
924d21b
[#425] Change svgeez gem location in gemfile
mosharaf13 Jul 18, 2023
be61bd2
[#425] Add svgeez github wiki addon if .github directory exists
mosharaf13 Jul 18, 2023
d971f9c
[#425] Remove unnecessary line from svgeez template
mosharaf13 Jul 18, 2023
0cd5838
[#425] Add svg helper for svgeez addon
mosharaf13 Jul 18, 2023
1f55bb3
[#425] Fix lint
mosharaf13 Jul 18, 2023
c02e98c
[#425] Modify svgeez addon test
mosharaf13 Jul 18, 2023
142e347
[#425] Remove gemfile spec for svgeez
mosharaf13 Jul 18, 2023
5685935
[#425] Fix lint
mosharaf13 Jul 20, 2023
72b0be2
[#425] Change svgeez github wiki sidebar title
mosharaf13 Jul 20, 2023
624b044
[#425] Add svgeez addon's gems inside development group
mosharaf13 Jul 20, 2023
5530fb9
[#425] Change svgeez addon binary file
mosharaf13 Jul 20, 2023
b21c85c
[#425] Change svgeez wiki file name
mosharaf13 Jul 24, 2023
1f5197a
[#425] Remove empty line
mosharaf13 Jul 24, 2023
3b2dd79
[#425] Add inline_svg gem under production group
mosharaf13 Jul 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions .template/addons/svgeez/.github/wiki/Managing-SVG-Icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' } %>
```
14 changes: 14 additions & 0 deletions .template/addons/svgeez/.github/wiki/template.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
15 changes: 15 additions & 0 deletions .template/addons/svgeez/Gemfile.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
malparty marked this conversation as resolved.
Show resolved Hide resolved
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
malparty marked this conversation as resolved.
Show resolved Hide resolved
RUBY
end
12 changes: 12 additions & 0 deletions .template/addons/svgeez/bin/svg-sprite
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions .template/addons/svgeez/bin/template.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# frozen_string_literal: true

use_source_path __dir__

copy_file 'svg-sprite', 'bin/svg-sprite', mode: :preserve
14 changes: 14 additions & 0 deletions .template/addons/svgeez/helpers/svg_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions .template/addons/svgeez/helpers/template.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# frozen_string_literal: true

use_source_path __dir__

copy_file 'svg_helper.rb', 'app/helpers/svg_helper.rb'
6 changes: 6 additions & 0 deletions .template/addons/svgeez/template.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# frozen_string_literal: true

apply '.template/addons/svgeez/Gemfile.rb'
andyduong1920 marked this conversation as resolved.
Show resolved Hide resolved
apply '.template/addons/svgeez/bin/template.rb'
apply '.template/addons/svgeez/.github/wiki/template.rb'
apply '.template/addons/svgeez/helpers/template.rb'
1 change: 1 addition & 0 deletions .template/variants/web/template.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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__
Expand Down