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 CHANGED
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- OTk0YTQ2MzliYmUwZDRjNTBhZDg1MjZkMjAxNGRiMDIwMDI2ZDA2YQ==
4
+ NDk4MTM5Zjc4MjU1NGU2YTllMTFmMTc4ZWE5NzNhMGM5ODJlMzVkNQ==
5
5
  data.tar.gz: !binary |-
6
- M2MxNDEzY2E5MTM4NjUzOWUyNGIyZDdjMjc1YjgzZDYwNmUzNDZjMQ==
6
+ OTdmNzJhNzJiMDg2ZGI4MTliNzlmNDE4MDYyNzY1ODg1NGM4NDk5Zg==
7
7
  !binary "U0hBNTEy":
8
8
  metadata.gz: !binary |-
9
- MzI3NmY5YzI4NmQ1NTcwOGNmOTAzM2E3ZjlmNzY3YzE5NzA1NGUxMWJlZDVk
10
- YTA4NmVmYmI2Yjg0ZDQ1M2Y0MzZjNTJmNWFiMGFiNjA4ZTllMDRjNzM3ZTBk
11
- OTE5MzQ5ZDNjZTRhYmEyZTBiNmRiMDg3YWEwYzBjYTdmY2ExNTc=
9
+ OWZlODQxNTI5MTYyZjQwNDA2ODgzZjY3YTQ5MTY4YTdkYTEyODBjZjg1Mzhk
10
+ Yjc2Y2U0MDdjZTgwMTE1NDliODE0NTljZjcxODhjNmZkODc4ODBkNDE3NTli
11
+ NmJkYjJhYmVhZGFjYjljZGI1Zjg5ZmRmZTE3MTc5OWRkMmY4NTg=
12
12
  data.tar.gz: !binary |-
13
- YzE4ODJkY2M0NWQwMjllOTZjM2EzNWFhNzExMGJhMWRlN2M3YmMyYTcwZmZk
14
- MjZjY2M3OGMwZGIwN2M5MDU4OGMwNzNlNmNlYWQzZDJlZTkxNTcyZTQyZDZi
15
- MWZiOGE2MDc4ZDk2ZTViNTAyOWY1MWVhMjlmMjJiYjZlN2M5NGE=
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 `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).
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: inline-svg('my-file.svg');
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
- ###Replace Variable Strings
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="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
+ <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: inline-svg('my-file.svg', ( fillcolor: '#fff' ));
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="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
+ <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: inline-svg('my-file.svg', ( '$fillcolor': '#fff' ));
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
 
@@ -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
- path = Rails.application.assets[path]
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
@@ -1,3 +1,3 @@
1
1
  module SassInlineSvg
2
- VERSION = "0.0.3"
2
+ VERSION = "0.0.4"
3
3
  end
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.3
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: 2015-09-24 00:00:00.000000000 Z
11
+ date: 2016-01-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler