faw_icon 1.0.0 → 1.2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.travis.yml +2 -2
- data/Gemfile.lock +4 -6
- data/README.md +29 -22
- data/faw_icon.gemspec +1 -2
- data/lib/faw_icon/helper.rb +4 -2
- data/lib/faw_icon/version.rb +1 -1
- metadata +9 -24
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: de5480bbb14198a0b481e2ae8096b42825adcda417b12ab7903078bf179d7755
|
4
|
+
data.tar.gz: 5b962f280976cf45fa5b957787a8af52cf2c3460e606c62a1ed654a2e13800fd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 03b1b0464f81aeab522848538dd9bd11d633b34826d7f3b86d2bd19bada259d6e65aea6958f7cbc3d1e200da5381f6f59817180297ac226c3c470e0e07a1cdfe
|
7
|
+
data.tar.gz: 4bc8ce452b76ddee9999007093cbd01be9e3bc695542eebc90f1a23b98f6e08cbbfd3d9d97b42cf60abb8416f8728410ae28e8ff03d1da03e07550cb1fc269b3
|
data/.travis.yml
CHANGED
data/Gemfile.lock
CHANGED
@@ -1,22 +1,20 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
faw_icon (
|
4
|
+
faw_icon (1.2.1)
|
5
5
|
|
6
6
|
GEM
|
7
7
|
remote: https://rubygems.org/
|
8
8
|
specs:
|
9
|
-
minitest (5.11.3)
|
10
9
|
rake (10.5.0)
|
11
10
|
|
12
11
|
PLATFORMS
|
13
|
-
|
12
|
+
x86_64-linux
|
14
13
|
|
15
14
|
DEPENDENCIES
|
16
|
-
bundler (~>
|
15
|
+
bundler (~> 2.2)
|
17
16
|
faw_icon!
|
18
|
-
minitest (~> 5.0)
|
19
17
|
rake (~> 10.0)
|
20
18
|
|
21
19
|
BUNDLED WITH
|
22
|
-
|
20
|
+
2.2.5
|
data/README.md
CHANGED
@@ -24,15 +24,16 @@ Or install it yourself as:
|
|
24
24
|
|
25
25
|
$ gem install faw_icon
|
26
26
|
|
27
|
-
You will need to download the .zip folder from [Font Awesome](https://fontawesome.com/
|
27
|
+
You will need to download the .zip folder from [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself)
|
28
28
|
where you can choose either the free or the PRO collection.
|
29
29
|
|
30
|
-
Include in your application.scss the `fontawesome/
|
31
|
-
ideally placing in the `app/assets/stylesheets/
|
30
|
+
Include in your application.scss the `fontawesome/css/svg-with-js.css`
|
31
|
+
ideally placing in the `app/assets/stylesheets/fontawesome/svg-with-js.css`
|
32
32
|
|
33
33
|
application.scss
|
34
34
|
|
35
|
-
@import "
|
35
|
+
@import "svg-with-js.min";
|
36
|
+
@import "fontawesome/all";
|
36
37
|
|
37
38
|
## Configuration
|
38
39
|
The below options are also available for further customization
|
@@ -64,21 +65,21 @@ from the PRO collection and introduces several ways to include icons in the appl
|
|
64
65
|
1. `json` load a json file, traverse and find the icon
|
65
66
|
2. `raw` load a single svg file from the filesystem
|
66
67
|
3. `sprite` load an svg sprite and target the icon by using svg fragment identifiers
|
67
|
-
4. `js` load one or more .js files according to the recommended way described at [svg-with-js](https://fontawesome.com/how-to-use/
|
68
|
+
4. `js` load one or more .js files according to the recommended way described at [svg-with-js](https://fontawesome.com/how-to-use/on-the-web/using-with/jquery)
|
68
69
|
|
69
70
|
They all have pros and cons so choose the one that is right for you.
|
70
71
|
|
71
72
|
`json` a single file that contains everything however it will have a noticeable impact on performance when used with
|
72
73
|
the PRO collection because of the file size but not so much with the free one or a reduced set.
|
73
|
-
In order to use copy the `fontawesome/
|
74
|
+
In order to use copy the `fontawesome/metadata/icons.json` in `app/assets/javascripts/icons.json`
|
74
75
|
|
75
|
-
`raw` requires to push in your codebase all 2.986 icons unless they are hosted in a CDN, AWS or just a different repo.
|
76
|
+
`raw` requires to push in your codebase all 2.986 icons unless they are hosted in a CDN, AWS or just a different repo. And keep them
|
77
|
+
under `vendor/fa5`
|
76
78
|
|
77
79
|
with `sprite` you only need four files but they can only be served from public folder for the fragment identifier feature to work
|
78
80
|
which makes them available for anyone to download whereas the `raw` ones are 'hidden' in the `vendor` folder.
|
79
81
|
|
80
|
-
Read more about svg sprites in the [docs](https://fontawesome.com/how-to-use/svg-sprites)
|
81
|
-
and [browser support](https://fontawesome.com/how-to-use/svg-sprites#browser-support)
|
82
|
+
Read more about svg sprites in the [docs](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites)
|
82
83
|
|
83
84
|
`js` uses the recommended way from Font-Awesome however it introduces a rendering issue relating to turbolinks
|
84
85
|
[more info](https://github.com/FortAwesome/Font-Awesome/issues/11924)
|
@@ -94,20 +95,20 @@ or create an issue requesting a missing feature.
|
|
94
95
|
|
95
96
|
|
96
97
|
## Usage
|
97
|
-
All options from [additional-styling](https://fontawesome.com/how-to-use/
|
98
|
+
All options from [additional-styling](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons) are supported with the exception of
|
98
99
|
CSS Pseudo-elements.
|
99
100
|
|
100
101
|
A mapping for the properties has been introduced in an attempt to make them more readable and easier to remember
|
101
102
|
|
102
|
-
| Original property | Mapped property | Required | Original value
|
103
|
-
|
104
|
-
| class | style | yes | fas, far, fal, fab | solid, regular, light, brand | string |
|
105
|
-
| class | name | yes | fa-user
|
106
|
-
| class | fixed_width | no | fa-fw
|
107
|
-
| class | spin | no | fa-spin
|
108
|
-
| class | extra_class | no | N/A
|
109
|
-
| data-fa-transform | transform | no | grow-6
|
110
|
-
| data-fa-mask | mask | no | fas fa-comment
|
103
|
+
| Original property | Mapped property | Required | Original value | Mapped value | Type |
|
104
|
+
|-------------------|-----------------|----------|-------------------------|---------------------------------------|---------|
|
105
|
+
| class | style | yes | fas, far, fal, fab, fad | solid, regular, light, brand, duotone | string |
|
106
|
+
| class | name | yes | fa-user | user | string |
|
107
|
+
| class | fixed_width | no | fa-fw | true | boolean |
|
108
|
+
| class | spin | no | fa-spin | true | boolean |
|
109
|
+
| class | extra_class | no | N/A | any custom css class | string |
|
110
|
+
| data-fa-transform | transform | no | grow-6 | grow-6 | string |
|
111
|
+
| data-fa-mask | mask | no | fas fa-comment | fas fa-comment | string |
|
111
112
|
|
112
113
|
|
113
114
|
The `style` and `name` are required params and the rest optional ones go into a Hash in any order they might occur.
|
@@ -120,11 +121,17 @@ Then just use them like this
|
|
120
121
|
<%= faw_icon 'light', 'info', {fixed_width: true} %>
|
121
122
|
<%= faw_icon 'regular', 'sync', {spin: true} %>
|
122
123
|
<%= faw_icon 'brand', 'android', {transform: 'grow-5'} %>
|
124
|
+
<%= faw_icon 'duotone', 'abacus' %>
|
123
125
|
|
124
126
|
Bear in mind that the `brand` icons only come in one style called `brand`(!)
|
125
|
-
and the rest come in
|
126
|
-
Find them all in the [gallery](https://fontawesome.com/icons?d=gallery)
|
127
|
-
|
127
|
+
and the rest come in four variations but not all are available in the free collection.
|
128
|
+
Find them all in the [gallery](https://fontawesome.com/icons?d=gallery)
|
129
|
+
|
130
|
+
Note: Duotone style works just like all other icons, just use the 'duotone' style property.
|
131
|
+
|
132
|
+
## Troubleshooting
|
133
|
+
If you get an error similar to this `cannot load such file -- rexml/document (LoadError)` you need to add [rexml](https://rubygems.org/gems/rexml) gem to your Gemfile
|
134
|
+
|
128
135
|
## Contributing
|
129
136
|
|
130
137
|
[Issues](https://github.com/alexwebgr/faw_icon/issues) and [pull requests](https://github.com/alexwebgr/faw_icon/pulls) are more than welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
data/faw_icon.gemspec
CHANGED
@@ -21,8 +21,7 @@ Gem::Specification.new do |spec|
|
|
21
21
|
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
22
22
|
spec.require_paths = ["lib"]
|
23
23
|
|
24
|
-
spec.add_development_dependency "bundler", "~>
|
24
|
+
spec.add_development_dependency "bundler", "~> 2.2"
|
25
25
|
spec.add_development_dependency "rake", "~> 10.0"
|
26
|
-
spec.add_development_dependency "minitest", "~> 5.0"
|
27
26
|
# spec.required_ruby_version = '>= 2.5.0'
|
28
27
|
end
|
data/lib/faw_icon/helper.rb
CHANGED
@@ -42,7 +42,7 @@ module FawIcon
|
|
42
42
|
end
|
43
43
|
|
44
44
|
def by_raw(style, name, html_props)
|
45
|
-
if File.
|
45
|
+
if File.exist? Rails.root.join(FawIcon.configuration.raw_svg_path, style, "#{name}.svg")
|
46
46
|
doc = File.open(Rails.root.join(FawIcon.configuration.raw_svg_path, style, "#{name}.svg")) { |f| REXML::Document.new(f) }
|
47
47
|
svg = doc.root
|
48
48
|
end
|
@@ -51,7 +51,7 @@ module FawIcon
|
|
51
51
|
end
|
52
52
|
|
53
53
|
def by_sprite(style, name, html_props)
|
54
|
-
if File.
|
54
|
+
if File.exist? Rails.root.join(FawIcon.configuration.svg_sprites_path, "fa-#{style}.svg")
|
55
55
|
doc = REXML::Document.new("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><use href=\"/fa5/svg-sprites/fa-#{style}.svg##{name}\"></use></svg>")
|
56
56
|
svg = doc.root
|
57
57
|
end
|
@@ -86,6 +86,8 @@ module FawIcon
|
|
86
86
|
'fal'
|
87
87
|
when 'brands'
|
88
88
|
'fab'
|
89
|
+
when 'duotone'
|
90
|
+
'fad'
|
89
91
|
end
|
90
92
|
end
|
91
93
|
|
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: 1.
|
4
|
+
version: 1.2.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- alexwebgr
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2023-01-20 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -16,14 +16,14 @@ dependencies:
|
|
16
16
|
requirements:
|
17
17
|
- - "~>"
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version: '
|
19
|
+
version: '2.2'
|
20
20
|
type: :development
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
24
|
- - "~>"
|
25
25
|
- !ruby/object:Gem::Version
|
26
|
-
version: '
|
26
|
+
version: '2.2'
|
27
27
|
- !ruby/object:Gem::Dependency
|
28
28
|
name: rake
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
@@ -38,21 +38,7 @@ dependencies:
|
|
38
38
|
- - "~>"
|
39
39
|
- !ruby/object:Gem::Version
|
40
40
|
version: '10.0'
|
41
|
-
|
42
|
-
name: minitest
|
43
|
-
requirement: !ruby/object:Gem::Requirement
|
44
|
-
requirements:
|
45
|
-
- - "~>"
|
46
|
-
- !ruby/object:Gem::Version
|
47
|
-
version: '5.0'
|
48
|
-
type: :development
|
49
|
-
prerelease: false
|
50
|
-
version_requirements: !ruby/object:Gem::Requirement
|
51
|
-
requirements:
|
52
|
-
- - "~>"
|
53
|
-
- !ruby/object:Gem::Version
|
54
|
-
version: '5.0'
|
55
|
-
description:
|
41
|
+
description:
|
56
42
|
email:
|
57
43
|
- email@alex-web.gr
|
58
44
|
executables: []
|
@@ -77,7 +63,7 @@ homepage: https://github.com/alexwebgr/faw_icon
|
|
77
63
|
licenses:
|
78
64
|
- MIT
|
79
65
|
metadata: {}
|
80
|
-
post_install_message:
|
66
|
+
post_install_message:
|
81
67
|
rdoc_options: []
|
82
68
|
require_paths:
|
83
69
|
- lib
|
@@ -92,9 +78,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
92
78
|
- !ruby/object:Gem::Version
|
93
79
|
version: '0'
|
94
80
|
requirements: []
|
95
|
-
|
96
|
-
|
97
|
-
signing_key:
|
81
|
+
rubygems_version: 3.2.3
|
82
|
+
signing_key:
|
98
83
|
specification_version: 4
|
99
84
|
summary: A simple helper for Font-Awesome 5 using raw SVG and SVG-with-JS
|
100
85
|
test_files: []
|