faw_icon 0.5.2 → 0.6.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +5 -1
- data/README.md +33 -1
- data/faw_icon.gemspec +1 -0
- data/lib/faw_icon/configuration.rb +8 -0
- data/lib/faw_icon/helper.rb +55 -19
- data/lib/faw_icon/version.rb +1 -1
- metadata +22 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8b0005468e9555d36d639101ae0dd657cd1bae0c5baf2d2f7205fc206a2563fe
|
4
|
+
data.tar.gz: 738a343d552e5155f9faa171ad0f23c8dd1fc1bf7a55350cd53721ad71000bc2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3dd3c6b0ade33e08037cb727d9c005c2de467b2c07412023e92f64224f5354c7db5661217c4f3e6cfb903575e3ae2fdf93b70b07aee70dbf872ee64d1f385ea2
|
7
|
+
data.tar.gz: 7f8cbd4412975e7aa6b33e08f66739ef3d39ba545d4c4448f596fcc6cdf0adf6700a05d45a3eb34f045a3836ebb320823ff6c474a9669dd195a0f250cad52e82
|
data/Gemfile.lock
CHANGED
@@ -1,12 +1,16 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
faw_icon (0.
|
4
|
+
faw_icon (0.6.2)
|
5
|
+
nokogiri (~> 1.8, >= 1.8.2)
|
5
6
|
|
6
7
|
GEM
|
7
8
|
remote: https://rubygems.org/
|
8
9
|
specs:
|
10
|
+
mini_portile2 (2.3.0)
|
9
11
|
minitest (5.11.3)
|
12
|
+
nokogiri (1.8.2)
|
13
|
+
mini_portile2 (~> 2.3.0)
|
10
14
|
rake (10.5.0)
|
11
15
|
|
12
16
|
PLATFORMS
|
data/README.md
CHANGED
@@ -41,6 +41,10 @@ The below options are also available for further customization
|
|
41
41
|
| Property | Default |
|
42
42
|
|---------------------------|-----------------------------------|
|
43
43
|
| icons_path | app/assets/javascripts/icons.json |
|
44
|
+
| raw_svg_path | vendor/fa5/raw-svg |
|
45
|
+
| svg_sprites_path | public/fa5/svg-sprites |
|
46
|
+
| source_type | json (json, raw, sprite) |
|
47
|
+
| icon_not_found | `<svg>...</svg>` |
|
44
48
|
| default_family_prefix | fa |
|
45
49
|
| default_replacement_class | svg-inline--fa |
|
46
50
|
|
@@ -53,7 +57,35 @@ FawIcon.configure do |config|
|
|
53
57
|
config.default_family_prefix = 'fa'
|
54
58
|
config.default_replacement_class = 'svg-inline--fa'
|
55
59
|
end
|
56
|
-
```
|
60
|
+
```
|
61
|
+
|
62
|
+
The configuration option `source_type` is added in this release to address the performance hit from loading large json files
|
63
|
+
from the PRO collection and introduces three ways to include icons in the application.
|
64
|
+
|
65
|
+
1. `json` load a json file, traverse and find the icon
|
66
|
+
2. `raw` load a single svg file from the filesystem
|
67
|
+
3. `sprite` load an svg sprite and target the icon by using svg fragment identifiers
|
68
|
+
|
69
|
+
They all have pros and cons so choose the one that is right for you.
|
70
|
+
|
71
|
+
`json` a single file that contains everything however it will have a noticeable impact on performance when used with
|
72
|
+
the PRO collection because of the file size but not so much with the free one or a reduced set.
|
73
|
+
|
74
|
+
`raw` requires to push in your codenase all 2.986 icons unless they are hosted in a CDN, AWS or just a different repo.
|
75
|
+
|
76
|
+
with `sprite` you only need four files but they can only be served from public folder for the fragment identifier feature to work
|
77
|
+
which makes them available for anyone to download whereas the `raw` ones are 'hidden' in the `vendor` folder.
|
78
|
+
|
79
|
+
Read more about svg sprites in the [docs](https://fontawesome.com/how-to-use/svg-sprites)
|
80
|
+
and [browser support](https://fontawesome.com/how-to-use/svg-sprites#browser-support)
|
81
|
+
|
82
|
+
However the paths to the icons can be configured and as long the parent folder with the style name i.e. `solid`, `regular`
|
83
|
+
and so on remains the same feel free to place anywhere you like and if possible share your solution !
|
84
|
+
|
85
|
+
At the same time feel free to create a pull request if you have another idea on how to include them
|
86
|
+
or create an issue requesting a missing feature.
|
87
|
+
|
88
|
+
|
57
89
|
## Usage
|
58
90
|
All options from [additional-styling](https://fontawesome.com/how-to-use/svg-with-js#additional-styling) are supported with the exception of
|
59
91
|
CSS Pseudo-elements.
|
data/faw_icon.gemspec
CHANGED
@@ -24,4 +24,5 @@ Gem::Specification.new do |spec|
|
|
24
24
|
spec.add_development_dependency "bundler", "~> 1.16"
|
25
25
|
spec.add_development_dependency "rake", "~> 10.0"
|
26
26
|
spec.add_development_dependency "minitest", "~> 5.0"
|
27
|
+
spec.add_runtime_dependency 'nokogiri', '~> 1.8', '>= 1.8.2'
|
27
28
|
end
|
@@ -12,11 +12,19 @@ module FawIcon
|
|
12
12
|
|
13
13
|
class Configuration
|
14
14
|
attr_accessor :icons_path
|
15
|
+
attr_accessor :raw_svg_path
|
16
|
+
attr_accessor :svg_sprites_path
|
17
|
+
attr_accessor :source_type
|
18
|
+
attr_accessor :icon_not_found
|
15
19
|
attr_accessor :default_family_prefix
|
16
20
|
attr_accessor :default_replacement_class
|
17
21
|
|
18
22
|
def initialize
|
19
23
|
@icons_path = 'app/assets/javascripts/icons.json'
|
24
|
+
@raw_svg_path = 'vendor/fa5/raw-svg'
|
25
|
+
@svg_sprites_path = 'public/fa5/svg-sprites'
|
26
|
+
@source_type = 'json'
|
27
|
+
@icon_not_found = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g><path fill="currentColor" d="M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z"></path><circle fill="currentColor" cx="256" cy="364" r="28"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="r" values="28;14;28;28;14;28;"></animate><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;1;1;0;1;"></animate></circle><path fill="currentColor" opacity="1" d="M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;0;0;0;1;"></animate></path><path fill="currentColor" opacity="0" d="M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="0;0;1;1;0;0;"></animate></path></g></svg>'
|
20
28
|
@default_family_prefix = 'fa'
|
21
29
|
@default_replacement_class = 'svg-inline--fa'
|
22
30
|
end
|
data/lib/faw_icon/helper.rb
CHANGED
@@ -3,35 +3,65 @@ require "faw_icon/configuration"
|
|
3
3
|
|
4
4
|
module FawIcon
|
5
5
|
def faw_icon(style, name, options = {})
|
6
|
+
html_props = {}
|
6
7
|
style = 'brands' if style == 'brand'
|
7
8
|
fa_prefix = FawIcon.configuration.default_family_prefix
|
8
|
-
html_props = {}
|
9
|
-
icons = JSON.parse(File.read(FawIcon.configuration.icons_path))
|
10
|
-
view_box = [0, 0, 512, 512]
|
11
|
-
svg_path = '<g><path fill="currentColor" d="M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z"></path><circle fill="currentColor" cx="256" cy="364" r="28"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="r" values="28;14;28;28;14;28;"></animate><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;1;1;0;1;"></animate></circle><path fill="currentColor" opacity="1" d="M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;0;0;0;1;"></animate></path><path fill="currentColor" opacity="0" d="M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="0;0;1;1;0;0;"></animate></path></g>'
|
12
|
-
|
13
|
-
if icons[name].present?
|
14
|
-
if icons[name]['svg'][style].present?
|
15
|
-
svg_path = "<path d=\"#{icons[name]['svg'][style]['path']}\"/>"
|
16
|
-
view_box = icons[name]['svg'][style]['viewBox']
|
17
|
-
end
|
18
|
-
end
|
19
9
|
|
20
10
|
html_props[:class] = [fa_style(style), "#{fa_prefix}-#{name}", FawIcon.configuration.default_replacement_class]
|
21
11
|
html_props[:class] << "#{fa_prefix}-#{options[:size]}" if options[:size]
|
22
12
|
html_props[:class] << "#{fa_prefix}-fw" if options[:fixed_width]
|
23
13
|
html_props[:class] << "#{fa_prefix}-spin" if options[:spin]
|
24
14
|
html_props[:class] << options[:extra_class] if options[:extra_class]
|
15
|
+
html_props[:transform] = options[:transform] if options[:transform]
|
16
|
+
html_props[:mask] = options[:mask] if options[:mask]
|
25
17
|
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
18
|
+
case FawIcon.configuration.source_type
|
19
|
+
when 'json'
|
20
|
+
by_json(style, name, html_props)
|
21
|
+
when 'raw'
|
22
|
+
by_raw(style, name, html_props)
|
23
|
+
when 'sprite'
|
24
|
+
by_sprite(style, name, html_props)
|
25
|
+
end
|
26
|
+
end
|
33
27
|
|
34
|
-
|
28
|
+
def by_json(style, name, html_props)
|
29
|
+
icons = JSON.parse(File.read(FawIcon.configuration.icons_path))
|
30
|
+
|
31
|
+
if icons[name].present? && icons[name]['svg'][style].present?
|
32
|
+
doc = Nokogiri::HTML(icons[name]['svg'][style]['raw'])
|
33
|
+
svg = doc.at_css 'svg'
|
34
|
+
end
|
35
|
+
|
36
|
+
fa_tag(svg, html_props)
|
37
|
+
end
|
38
|
+
|
39
|
+
def by_raw(style, name, html_props)
|
40
|
+
if File.exists? Rails.root.join(FawIcon.configuration.raw_svg_path, style, "#{name}.svg")
|
41
|
+
doc = File.open(Rails.root.join(FawIcon.configuration.raw_svg_path, style, "#{name}.svg")) { |f| Nokogiri::HTML(f) }
|
42
|
+
svg = doc.at_css 'svg'
|
43
|
+
end
|
44
|
+
|
45
|
+
fa_tag(svg, html_props)
|
46
|
+
end
|
47
|
+
|
48
|
+
def by_sprite(style, name, html_props)
|
49
|
+
if File.exists? Rails.root.join(FawIcon.configuration.svg_sprites_path, "fa-#{style}.svg")
|
50
|
+
doc = Nokogiri::HTML("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><use xlink:href=\"/fa5/svg-sprites/fa-#{style}.svg##{name}\"></use></svg>")
|
51
|
+
svg = doc.at_css 'svg'
|
52
|
+
end
|
53
|
+
|
54
|
+
fa_tag(svg, html_props)
|
55
|
+
end
|
56
|
+
|
57
|
+
def fa_tag(svg = nil, html_props)
|
58
|
+
svg = icon_not_found if svg.nil?
|
59
|
+
|
60
|
+
svg['class'] = html_props[:class].join(' ')
|
61
|
+
svg['data-fa-transform'] = html_props[:transform] if html_props[:transform]
|
62
|
+
svg['data-fa-mask'] = html_props[:mask] if html_props[:mask]
|
63
|
+
|
64
|
+
svg.to_html.html_safe
|
35
65
|
end
|
36
66
|
|
37
67
|
def fa_style(style)
|
@@ -46,4 +76,10 @@ module FawIcon
|
|
46
76
|
'fab'
|
47
77
|
end
|
48
78
|
end
|
79
|
+
|
80
|
+
def icon_not_found
|
81
|
+
doc = Nokogiri::HTML(FawIcon.configuration.icon_not_found)
|
82
|
+
|
83
|
+
doc.at_css 'svg'
|
84
|
+
end
|
49
85
|
end
|
data/lib/faw_icon/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: faw_icon
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.6.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- alexwebgr
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2018-05-
|
11
|
+
date: 2018-05-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -52,6 +52,26 @@ dependencies:
|
|
52
52
|
- - "~>"
|
53
53
|
- !ruby/object:Gem::Version
|
54
54
|
version: '5.0'
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: nokogiri
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - "~>"
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '1.8'
|
62
|
+
- - ">="
|
63
|
+
- !ruby/object:Gem::Version
|
64
|
+
version: 1.8.2
|
65
|
+
type: :runtime
|
66
|
+
prerelease: false
|
67
|
+
version_requirements: !ruby/object:Gem::Requirement
|
68
|
+
requirements:
|
69
|
+
- - "~>"
|
70
|
+
- !ruby/object:Gem::Version
|
71
|
+
version: '1.8'
|
72
|
+
- - ">="
|
73
|
+
- !ruby/object:Gem::Version
|
74
|
+
version: 1.8.2
|
55
75
|
description:
|
56
76
|
email:
|
57
77
|
- email@alex-web.gr
|