sass_inline_svg 0.0.3 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- 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
|