sass_inline_svg 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +8 -8
- data/README.md +14 -9
- data/lib/sass_inline_svg.rb +5 -3
- data/lib/sass_inline_svg/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
NDk4MTM5Zjc4MjU1NGU2YTllMTFmMTc4ZWE5NzNhMGM5ODJlMzVkNQ==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
OTdmNzJhNzJiMDg2ZGI4MTliNzlmNDE4MDYyNzY1ODg1NGM4NDk5Zg==
|
7
7
|
!binary "U0hBNTEy":
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
OWZlODQxNTI5MTYyZjQwNDA2ODgzZjY3YTQ5MTY4YTdkYTEyODBjZjg1Mzhk
|
10
|
+
Yjc2Y2U0MDdjZTgwMTE1NDliODE0NTljZjcxODhjNmZkODc4ODBkNDE3NTli
|
11
|
+
NmJkYjJhYmVhZGFjYjljZGI1Zjg5ZmRmZTE3MTc5OWRkMmY4NTg=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
OTAwYmFlMDdlY2JiZmM3ZWZmM2EyYTY3M2U4ZWEyYWY1MWY4MDI1YWY0MTk2
|
14
|
+
OWQxODAyYmYxMjY0MTk0MDNkYmM2ZjRjMzc5NjFiMWUxYWYyZDQwZjk5OWM3
|
15
|
+
MzlhOWQ0OWJlM2RjNGIwMmIyNzNkOGNkZWYwOTEyNThmZGE0NWY=
|
data/README.md
CHANGED
@@ -17,43 +17,48 @@ Add this line to your application's Gemfile:
|
|
17
17
|
|
18
18
|
## Usage
|
19
19
|
|
20
|
-
Sass-inline-svg adds a `
|
20
|
+
Sass-inline-svg adds a `inline_svg` function you can use with Sass. It url-encodes the contents of the specified file and inlines it in your CSS (Url-encoded SVG is about 30% smaller than base64).
|
21
21
|
|
22
22
|
###Basic
|
23
23
|
|
24
24
|
.my-thing {
|
25
|
-
background-image:
|
25
|
+
background-image: inline_svg('my-file.svg');
|
26
26
|
}
|
27
27
|
|
28
28
|
When working with plain Sass, you'll have to use the full path to the svg file, when using Rails the path will be resolved by the Rails asset pipeline.
|
29
29
|
|
30
|
-
The `svg-inline()` function as it was named in earlier versions is now aliased to `inline-svg()` so either of both can be used.
|
31
30
|
|
32
|
-
###
|
31
|
+
###Replacing Variable Strings
|
33
32
|
|
34
33
|
Replacing variable strings in SVG when inlining them with Sass makes sense e.g. if you need multiple variants of the same graphic with different fill colors.
|
35
34
|
|
36
35
|
With Sass-Inline-Svg you only need __one__ source svg file with a variable string for `fill`:
|
37
36
|
|
38
37
|
…
|
39
|
-
<polygon fill="fillcolor" points="
|
38
|
+
<polygon fill="fillcolor" points="[…] "/>
|
40
39
|
…
|
41
40
|
|
42
41
|
The variants needed can be created during inlinig with Sass. Pass a Sass map of replacements as a second parameter:
|
43
42
|
|
44
43
|
.my-thing {
|
45
|
-
background-image:
|
44
|
+
background-image: inline_svg('my-file.svg', ( fillcolor: '#fff' ));
|
46
45
|
}
|
47
46
|
|
48
47
|
This will replace all occurences of `fillcolor` in your SVG with `#fff`:
|
49
48
|
|
50
49
|
…
|
51
|
-
<polygon fill="#fff" points="
|
50
|
+
<polygon fill="#fff" points="[…]"/>
|
52
51
|
…
|
53
52
|
|
54
|
-
__Note:__ If you use `$`- or `@`-prefixed variable names in your SVG, you'll have to quote the keys in your raplement Sass map:
|
53
|
+
__Note:__ If you use `$`- or `@`-prefixed variable names in your SVG or if you want to replace an existing hex color, you'll have to quote the keys in your raplement Sass map:
|
55
54
|
|
56
55
|
.my-thing {
|
57
|
-
background-image:
|
56
|
+
background-image: inline_svg('my-file.svg', ( '$fillcolor': '#fff' ));
|
57
|
+
}
|
58
|
+
|
59
|
+
or
|
60
|
+
|
61
|
+
.my-thing {
|
62
|
+
background-image: inline_svg('my-file.svg', ( '#000': '#fff' ));
|
58
63
|
}
|
59
64
|
|
data/lib/sass_inline_svg.rb
CHANGED
@@ -8,15 +8,17 @@ module Sass::Script::Functions
|
|
8
8
|
def svg_inline(path, repl = nil)
|
9
9
|
inline_svg(path, repl)
|
10
10
|
end
|
11
|
-
|
11
|
+
|
12
12
|
def inline_svg(path, repl = nil)
|
13
13
|
assert_type path, :String
|
14
14
|
|
15
15
|
path = path.value.strip()
|
16
16
|
|
17
|
-
# Use Rails asset pipeline if in Rails context:
|
17
|
+
# Use Rails asset pipeline if in Rails context (and handle File not found):
|
18
18
|
if defined?(Rails)
|
19
|
-
|
19
|
+
asset = Rails.application.assets.find_asset(path)
|
20
|
+
raise "File not found or cannot be read: #{path}" if asset.nil?
|
21
|
+
path = asset
|
20
22
|
end
|
21
23
|
|
22
24
|
svg = _readFile(path).strip
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sass_inline_svg
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Franz Heidl
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2016-01-16 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|