sass_inline_svg 0.0.1 → 0.0.2
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 -6
- data/lib/sass_inline_svg/version.rb +1 -1
- data/lib/sass_inline_svg.rb +16 -4
- data/sache.json +5 -0
- metadata +3 -4
- data/close-blk.svg +0 -3
- data/close-rd.svg +0 -4
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
ZDY5ZjliYmQ0YzRlMTMxOWM5NmQ2YTc3YzMzZGQwZGU1NzIxNGI3Mg==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
ZTRmOWYwODMwODY2NDUyM2QxYjMwMzBjYjA0NzY2MTAyMDZmODNmNg==
|
7
7
|
!binary "U0hBNTEy":
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
N2VmODFkMzQ1MzE4NTMzNTg1MjdkZTI4NDE4ZDY1NTRkNGZhMjBiZmYyNjBj
|
10
|
+
NTlmY2VmNTZjY2MwMjMzNjhhYzU0YjNlMzE0NjkzOTNhMjY1ZjU4OTgzZWY4
|
11
|
+
YTk0YTljNzIxNWZjM2FiMzI3Y2FlMjZiNWU4YTRmNTA5YjkzMmM=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
MjgxMjMzYzE0Mjg0NDgxNWQ0ZWEwYzFhYmQzZWExNjEyNGU5NWExYWY4Mzk3
|
14
|
+
ZDIyNTk0YmViNjJlMGI2MGZkMjg4NDgzMzY2NzBhNWVmZGZiMTUyN2NjZTBh
|
15
|
+
YzZiZmI0ZmI1Nzc0MzI3ZGEzNDBmMDhkNDQ0MWZiMjNiNzY1ZTI=
|
data/README.md
CHANGED
@@ -1,5 +1,7 @@
|
|
1
1
|
# Sass-Inline-Svg
|
2
2
|
|
3
|
+
[](http://badge.fury.io/rb/sass_inline_svg)
|
4
|
+
|
3
5
|
Inline url-encoded SVG with Sass. Optional variable string replacement included!
|
4
6
|
|
5
7
|
|
@@ -15,7 +17,7 @@ Add this line to your application's Gemfile:
|
|
15
17
|
|
16
18
|
## Usage
|
17
19
|
|
18
|
-
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.
|
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).
|
19
21
|
|
20
22
|
###Basic
|
21
23
|
|
@@ -23,15 +25,17 @@ Sass-inline-svg adds a `inline-svg` function you can use with Sass. It url-encod
|
|
23
25
|
background-image: inline-svg('my-file.svg');
|
24
26
|
}
|
25
27
|
|
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
|
+
|
26
30
|
###Replace Variable Strings
|
27
31
|
|
28
32
|
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.
|
29
33
|
|
30
|
-
With Sass-Inline-Svg you only need
|
34
|
+
With Sass-Inline-Svg you only need __one__ source svg file with a variable string for `fill`:
|
31
35
|
|
32
|
-
|
33
|
-
|
34
|
-
|
36
|
+
…
|
37
|
+
<polygon fill="fillcolor" points="29.43 25.19 20.24 16 29.43 6.81 25.19 2.57 16 11.76 6.81 2.57 2.57 6.81 11.76 16 2.57 25.19 6.81 29.44 16 20.24 25.19 29.44 "/>
|
38
|
+
…
|
35
39
|
|
36
40
|
The variants needed can be created during inlinig with Sass. Pass a Sass map of replacements as a second parameter:
|
37
41
|
|
@@ -39,7 +43,11 @@ The variants needed can be created during inlinig with Sass. Pass a Sass map of
|
|
39
43
|
background-image: inline-svg('my-file.svg', ( fillcolor: '#fff' ));
|
40
44
|
}
|
41
45
|
|
42
|
-
This will replace all occurences of `fillcolor` in your SVG with `#fff
|
46
|
+
This will replace all occurences of `fillcolor` in your SVG with `#fff`:
|
47
|
+
|
48
|
+
…
|
49
|
+
<polygon fill="#fff" points="29.43 25.19 20.24 16 29.43 6.81 25.19 2.57 16 11.76 6.81 2.57 2.57 6.81 11.76 16 2.57 25.19 6.81 29.44 16 20.24 25.19 29.44 "/>
|
50
|
+
…
|
43
51
|
|
44
52
|
__Note:__ If you use `$`- or `@`-prefixed variable names in your SVG, you'll have to quote the keys in your raplement Sass map:
|
45
53
|
|
data/lib/sass_inline_svg.rb
CHANGED
@@ -4,13 +4,25 @@ require "cgi"
|
|
4
4
|
|
5
5
|
module Sass::Script::Functions
|
6
6
|
|
7
|
+
# Alias function to comply with old documentation
|
7
8
|
def svg_inline(path, repl = nil)
|
8
|
-
|
9
|
+
svg_inline(path, repl)
|
10
|
+
end
|
11
|
+
|
12
|
+
def inline_svg(path, repl = nil)
|
13
|
+
assert_type path, :String
|
14
|
+
|
15
|
+
path = path.value.strip()
|
16
|
+
|
17
|
+
# Use Rails asset pipeline if in Rails context:
|
18
|
+
if defined?(Rails)
|
19
|
+
path = Rails.application.assets[path]
|
20
|
+
end
|
9
21
|
|
10
|
-
svg = _readFile(path
|
22
|
+
svg = _readFile(path).strip
|
11
23
|
|
12
24
|
if repl && repl.respond_to?('to_h')
|
13
|
-
repl = repl.to_h
|
25
|
+
repl = repl.to_h
|
14
26
|
svg = svg.to_s
|
15
27
|
|
16
28
|
repl.each_pair do |k, v|
|
@@ -35,7 +47,7 @@ module Sass::Script::Functions
|
|
35
47
|
f.read
|
36
48
|
end
|
37
49
|
else
|
38
|
-
raise Sass::SyntaxError, "File not found or cannot be read: #{path}"
|
50
|
+
raise Sass::SyntaxError, "File not found or cannot be read: #{path}"
|
39
51
|
end
|
40
52
|
end
|
41
53
|
|
data/sache.json
ADDED
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.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Franz Heidl
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-
|
11
|
+
date: 2015-09-23 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -51,10 +51,9 @@ files:
|
|
51
51
|
- LICENSE.txt
|
52
52
|
- README.md
|
53
53
|
- Rakefile
|
54
|
-
- close-blk.svg
|
55
|
-
- close-rd.svg
|
56
54
|
- lib/sass_inline_svg.rb
|
57
55
|
- lib/sass_inline_svg/version.rb
|
56
|
+
- sache.json
|
58
57
|
- sass_inline_svg.gemspec
|
59
58
|
homepage: https://github.com/franzheidl/sass-inline-svg
|
60
59
|
licenses:
|
data/close-blk.svg
DELETED
@@ -1,3 +0,0 @@
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0" y="0" width="32" height="32" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
2
|
-
<polygon fill="#000" points="29.43 25.19 20.24 16 29.43 6.81 25.19 2.57 16 11.76 6.81 2.57 2.57 6.81 11.76 16 2.57 25.19 6.81 29.44 16 20.24 25.19 29.44 "/>
|
3
|
-
</svg>
|
data/close-rd.svg
DELETED
@@ -1,4 +0,0 @@
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0" y="0" width="32" height="32" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
2
|
-
<polygon fill="#FF0000" points="29.43 25.19 20.24 16 29.43 6.81 25.19 2.57 16 11.76 6.81 2.57 2.57 6.81 11.76 16 2.57 25.19 6.81 29.44 16 20.24 25.19 29.44 "/>
|
3
|
-
</svg>
|
4
|
-
|