File tree Expand file tree Collapse file tree 5 files changed +27
-22
lines changed Expand file tree Collapse file tree 5 files changed +27
-22
lines changed Original file line number Diff line number Diff line change @@ -15,16 +15,18 @@ Then, add it to your `gulpfile.js`:
15
15
var iconfont = require (' gulp-iconfont' );
16
16
var iconfontCss = require (' gulp-iconfont-css' );
17
17
18
+ var fontName = ' Icons' ;
19
+
18
20
gulp .task (' iconfont' , function (){
19
21
gulp .src ([' app/assets/icons/*.svg' ])
20
22
.pipe (iconfontCss ({
21
- fontFamily : ' Icons ' , // has to be identical to iconfont's " fontName" option
23
+ fontName : fontName,
22
24
path: ' app/assets/css/templates/_icons.scss' ,
23
- targetPath: ' ../../css/_icons.scss' , // relative to gulp.dest below
24
- fontPath: ' ../../fonts/icons/' , // relative to targetPath (yes, slightly redundant but necessary for CSS template)
25
- })
25
+ targetPath: ' ../../css/_icons.scss' ,
26
+ fontPath: ' ../../fonts/icons/'
27
+ }))
26
28
.pipe (iconfont ({
27
- fontName: ' Icons '
29
+ fontName: fontName
28
30
}))
29
31
.pipe (gulp .dest (' app/assets/fonts/icons/' ));
30
32
});
@@ -36,10 +38,10 @@ gulp.task('iconfont', function(){
36
38
37
39
### iconfontCSS(options)
38
40
39
- #### options.fontFamily
41
+ #### options.fontName
40
42
Type: ` String `
41
43
42
- The name of the generated font family (optional, defaults to "Icons" ). **Important**: Has to be identical to iconfont's ` ` ` fontName` ` ` option.
44
+ The name of the generated font family (required ). ** Important** : Has to be identical to iconfont's ``` fontName ``` option.
43
45
44
46
#### options.path
45
47
Type: ` String `
Original file line number Diff line number Diff line change 1
1
@font-face {
2
- font-family : " <%= fontFamily %>" ;
3
- src : url (' <%= fontPath %><%= fontFamily %>.eot?' ) format (' eot' );
4
- src : url (' <%= fontPath %><%= fontFamily %>.eot?iefix' ) format (' eot' ),
5
- url (' <%= fontPath %><%= fontFamily %>.woff' ) format (' woff' ),
6
- url (' <%= fontPath %><%= fontFamily %>.ttf' ) format (' truetype' );
2
+ font-family : " <%= fontName %>" ;
3
+ src : url (' <%= fontPath %><%= fontName %>.eot?' ) format (' eot' );
4
+ src : url (' <%= fontPath %><%= fontName %>.eot?iefix' ) format (' eot' ),
5
+ url (' <%= fontPath %><%= fontName %>.woff' ) format (' woff' ),
6
+ url (' <%= fontPath %><%= fontName %>.ttf' ) format (' truetype' );
7
7
}
8
8
9
9
@mixin icon ($filename ) {
15
15
16
16
& :before {
17
17
content : $char ;
18
- font-family : " <%= fontFamily %>" ;
18
+ font-family : " <%= fontName %>" ;
19
19
-webkit-font-smoothing : antialiased ;
20
20
-moz-osx-font-smoothing : grayscale ;
21
21
font-style : normal ;
Original file line number Diff line number Diff line change @@ -23,11 +23,13 @@ function iconfontCSS(config) {
23
23
targetPath : '_icons.scss' ,
24
24
fontPath : './' ,
25
25
engine : 'lodash' ,
26
- firstGlyph : 0xE001 ,
27
- fontFamily : 'Icons'
26
+ firstGlyph : 0xE001
28
27
} , config ) ;
29
28
30
29
// Validate config
30
+ if ( ! config . fontName ) {
31
+ throw new gutil . PluginError ( PLUGIN_NAME , 'Missing option "fontName"' ) ;
32
+ }
31
33
if ( ! consolidate [ config . engine ] ) {
32
34
throw new gutil . PluginError ( PLUGIN_NAME , 'Consolidate missing template engine "' + config . engine + '"' ) ;
33
35
}
@@ -87,7 +89,7 @@ function iconfontCSS(config) {
87
89
if ( glyphMap . length ) {
88
90
consolidate [ config . engine ] ( config . path , {
89
91
glyphs : glyphMap ,
90
- fontFamily : config . fontFamily ,
92
+ fontName : config . fontName ,
91
93
fontPath : config . fontPath
92
94
} , function ( error , html ) {
93
95
if ( error ) {
Original file line number Diff line number Diff line change 1
1
@font-face {
2
- font-family : " <%= fontFamily %>" ;
3
- src : url (' <%= fontPath %><%= fontFamily %>.eot?' ) format (' eot' );
4
- src : url (' <%= fontPath %><%= fontFamily %>.eot?iefix' ) format (' eot' ),
5
- url (' <%= fontPath %><%= fontFamily %>.woff' ) format (' woff' ),
6
- url (' <%= fontPath %><%= fontFamily %>.ttf' ) format (' truetype' );
2
+ font-family : " <%= fontName %>" ;
3
+ src : url (' <%= fontPath %><%= fontName %>.eot?' ) format (' eot' );
4
+ src : url (' <%= fontPath %><%= fontName %>.eot?iefix' ) format (' eot' ),
5
+ url (' <%= fontPath %><%= fontName %>.woff' ) format (' woff' ),
6
+ url (' <%= fontPath %><%= fontName %>.ttf' ) format (' truetype' );
7
7
}
8
8
9
9
@mixin icon ($filename ) {
15
15
16
16
& :before {
17
17
content : $char ;
18
- font-family : " <%= fontFamily %>" ;
18
+ font-family : " <%= fontName %>" ;
19
19
-webkit-font-smoothing : antialiased ;
20
20
-moz-osx-font-smoothing : grayscale ;
21
21
font-style : normal ;
Original file line number Diff line number Diff line change @@ -8,6 +8,7 @@ describe('gulp-iconfont-css', function() {
8
8
it ( 'should generate SCSS file' , function ( done ) {
9
9
gulp . src ( __dirname + '/fixtures/icons/*.svg' )
10
10
. pipe ( iconfontCss ( {
11
+ fontName : 'Icons' ,
11
12
path : __dirname + '/fixtures/_icons.scss' ,
12
13
targetPath : '../_icons.scss'
13
14
} ) )
You can’t perform that action at this time.
0 commit comments