Skip to content
This repository was archived by the owner on Nov 9, 2017. It is now read-only.

Commit c8b9b31

Browse files
author
Markus Falk
committed
[Feature] add option for no-svg fallback, bump version
1 parent 40e1f46 commit c8b9b31

File tree

3 files changed

+114
-108
lines changed

3 files changed

+114
-108
lines changed

‎README.md‎

Lines changed: 69 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,69 @@
1-
base64-background-image
2-
============
3-
4-
scss mixin for creating svg base64 background-image width png fallback
5-
6-
Usage Example
7-
-------------
8-
9-
```scss
10-
// fallback png has same name as svg icon
11-
%icon {
12-
@include base64-background-image("icon");
13-
}
14-
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
22-
.ico {
23-
@extend %icon;
24-
}
25-
26-
.ico2 {
27-
@extend %icon2;
28-
}
29-
```
30-
31-
Generates
32-
33-
```css
34-
/* default with same-name fallback image */
35-
.ico {
36-
background-image: url('data:image/svg+xml;base64,ABC...');
37-
background-repeat: no-repeat;
38-
}
39-
.no-svg .ico {
40-
background-image: url('icon.png');
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-
}
51-
```
52-
53-
Requirements
54-
------------
55-
56-
* SVG feature detection with class: 'no-svg'
57-
* Compass
58-
* SASS
59-
60-
Installation
61-
------------
62-
63-
```bash
64-
bower install base64-background-image
65-
```
1+
# base64-background-image
2+
3+
scss mixin for creating svg base64 background-image width png fallback
4+
5+
## Options
6+
7+
```scss
8+
$url; // path to svg file without '.svg'
9+
$useFallback: true; // create no-svg fallback?
10+
$altFallback:""; // specify custom fallback image instead of <name>.png
11+
```
12+
13+
## Usage Example
14+
15+
```scss
16+
// fallback png has same name as svg icon
17+
%icon {
18+
@include base64-background-image("icon");
19+
}
20+
21+
// you want to use an alternating png as fallback
22+
%icon2 {
23+
@include base64-background-image("icon2", "alternating-icon-2");
24+
}
25+
26+
27+
// extend the placeholders
28+
.ico {
29+
@extend %icon;
30+
}
31+
32+
.ico2 {
33+
@extend %icon2;
34+
}
35+
```
36+
37+
Generates
38+
39+
```css
40+
/* default with same-name fallback image */
41+
.ico {
42+
background-image: url('data:image/svg+xml;base64,ABC...');
43+
background-repeat: no-repeat;
44+
}
45+
.no-svg .ico {
46+
background-image: url('icon.png');
47+
}
48+
49+
/* default with different fallback image */
50+
.ico2 {
51+
background-image: url('data:image/svg+xml;base64,ABC...');
52+
background-repeat: no-repeat;
53+
}
54+
.no-svg .ico2 {
55+
background-image: url('alternating-icon-2.png');
56+
}
57+
```
58+
59+
## Requirements
60+
61+
* SVG feature detection with class: 'no-svg'
62+
* Compass
63+
* SASS
64+
65+
## Installation
66+
67+
```bash
68+
bower install base64-background-image
69+
```

‎_base64-background-image.scss‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
@mixin base64-background-image($url, $altFallback:"") {
2-
3-
// scope
4-
$fallbackURL: "";
5-
6-
// use alternate fallback image if given
7-
@if $altFallback == "" {
8-
$fallbackURL: $url;
9-
} @else {
10-
$fallbackURL: $altFallback;
11-
}
12-
13-
// default use case: single icon
14-
background-repeat: no-repeat;
15-
16-
// svg
17-
background-image: inline-image($url + '.svg');
18-
19-
// png fallback
20-
.no-svg & {
21-
background-image: image-url($fallbackURL + '.png');
22-
}
23-
}
1+
@mixin base64-background-image($url, $useFallback: true, $altFallback:"") {
2+
3+
// scope
4+
$fallbackURL: "";
5+
6+
// use alternate fallback image if given
7+
@if $altFallback == "" {
8+
$fallbackURL: $url;
9+
} @else {
10+
$fallbackURL: $altFallback;
11+
}
12+
13+
// default use case: single icon
14+
background-repeat: no-repeat;
15+
16+
// svg
17+
background-image: inline-image($url + '.svg');
18+
19+
// png fallback
20+
@if $useFallback {
21+
.no-svg & {
22+
background-image: image-url($fallbackURL + '.png');
23+
}
24+
}
25+
}

‎bower.json‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
{
2-
"name": "base64-background-image",
3-
"version": "1.1.0",
4-
"homepage": "https://github.com/markusfalk/base64-image",
5-
"authors": [
6-
"Markus Falk <[email protected]>"
7-
],
8-
"description": "scss mixin for creating svg base64 background-image width png fallback",
9-
"main": "_base64-background-image.scss",
10-
"keywords": [
11-
"base64",
12-
"svg",
13-
"png",
14-
"background"
15-
],
16-
"license": "MIT",
17-
"ignore": [
18-
"*.html"
19-
]
20-
}
1+
{
2+
"name": "base64-background-image",
3+
"version": "2.0.0",
4+
"homepage": "https://github.com/markusfalk/base64-image",
5+
"authors": [
6+
"Markus Falk <[email protected]>"
7+
],
8+
"description": "scss mixin for creating svg base64 background-image width png fallback",
9+
"main": "_base64-background-image.scss",
10+
"keywords": [
11+
"base64",
12+
"svg",
13+
"png",
14+
"background"
15+
],
16+
"license": "MIT",
17+
"ignore": [
18+
"*.html"
19+
]
20+
}

0 commit comments

Comments
 (0)