This repository was archived by the owner on Nov 9, 2017. It is now read-only.
File tree Expand file tree Collapse file tree 2 files changed +25
-4
lines changed Expand file tree Collapse file tree 2 files changed +25
-4
lines changed Original file line number Diff line number Diff line change @@ -7,32 +7,53 @@ Usage Example
7
7
-------------
8
8
9
9
``` scss
10
- // somewhere in your base
10
+ // fallback png has same name as svg icon
11
11
%icon {
12
12
@include base64-background-image (" icon" );
13
13
}
14
14
15
- // extend the placeholder
15
+ // you want to use an alternating png as fallback
16
+ %icon2 {
17
+ @include base64-background-image (" icon2" , " alternating-icon-2" );
18
+ }
19
+
20
+
21
+ // extend the placeholders
16
22
.ico {
17
- @extend %disruption-orange ;
23
+ @extend %icon ;
24
+ }
25
+
26
+ .ico2 {
27
+ @extend %icon2 ;
18
28
}
19
29
```
20
30
21
31
Generates
22
32
23
33
``` css
34
+ /* default with same-name fallback image */
24
35
.ico {
25
36
background-image : url (' data:image/svg+xml;base64,ABC...' );
26
37
background-repeat : no-repeat ;
27
38
}
28
39
.no-svg .ico {
29
40
background-image : url (' icon.png' );
30
41
}
42
+
43
+ /* default with different fallback image */
44
+ .ico2 {
45
+ background-image : url (' data:image/svg+xml;base64,ABC...' );
46
+ background-repeat : no-repeat ;
47
+ }
48
+ .no-svg .ico2 {
49
+ background-image : url (' alternating-icon-2.png' );
50
+ }
31
51
```
32
52
33
53
Requirements
34
54
------------
35
55
56
+ * SVG feature detection with class: 'no-svg'
36
57
* Compass
37
58
* SASS
38
59
Original file line number Diff line number Diff line change 1
1
{
2
2
"name" : " base64-background-image" ,
3
- "version" : " 1.0.1 " ,
3
+ "version" : " 1.1.0 " ,
4
4
"homepage" : " https://github.com/markusfalk/base64-image" ,
5
5
"authors" : [
6
6
You can’t perform that action at this time.
0 commit comments