|
1 | 1 | # Laravel Elixir Icon fonts |
2 | 2 |
|
3 | | -This is a simple [Spritesmith](https://github.com/twolfson/gulp.spritesmith) wrapper for [Laravel Elixir](https://github.com/laravel/elixir). |
| 3 | +This is a simple [gulp-iconfont](https://github.com/nfroidure/gulp-iconfont) |
| 4 | + and [gulp-iconfont-css](https://github.com/backflip/gulp-iconfont-css) wrapper for [Laravel Elixir](https://github.com/laravel/elixir). |
4 | 5 |
|
5 | 6 | ## Install |
6 | 7 |
|
7 | 8 | Install this package over npm. |
8 | 9 |
|
9 | 10 | ```sh |
10 | | -npm install laravel-elixir-spritesmith --save-dev |
| 11 | +npm install laravel-elixir-fonts --save-dev |
11 | 12 | ``` |
12 | 13 |
|
13 | 14 | Require it in your `gulpfile.js` and use it. |
14 | 15 |
|
15 | 16 | ```javascript |
16 | 17 | var elixir = require('laravel-elixir'); |
17 | 18 |
|
18 | | -require('laravel-elixir-spritesmith'); |
| 19 | +require('laravel-elixir-fonts'); |
19 | 20 |
|
20 | 21 | elixir(function(mix) { |
21 | 22 |
|
22 | | - mix.spritesmith(); |
| 23 | + mix.fonts([elixir.config.assetsPath + '/svg/**/*.svg'], elixir.config.publicPath + '/fonts/'); |
23 | 24 |
|
24 | 25 | }); |
25 | 26 | ``` |
26 | 27 |
|
27 | 28 | ## How To |
28 | 29 |
|
29 | | -If you run `mix.spritesmith()` without parameters, it looks for all PNG-Files in `resources/assets/img/sprites` (folders included). |
| 30 | +If you run `mix.fonts()` without parameters, it looks for all SVG-Files in `resources/assets/svg` (folders included). |
30 | 31 |
|
31 | | -The output of the `sprite.css` file is in `resources/assets/css`. The output of your `sprite.png` is in `public/assets/img`. |
| 32 | +The output of the `icons.css` file is in `resources/assets/css`. |
| 33 | +The output of your `fonts` is in `public/assets/fonts`. |
32 | 34 |
|
33 | 35 | These are the default paths, they can be overwritten by `elixir.config.assetsPath` and `elixir.config.css.outputFolder` or by pass options. See the [config](https://github.com/laravel/elixir/blob/master/Config.js) file from elixir for more options. |
34 | 36 |
|
35 | 37 | ## Options |
36 | 38 |
|
37 | | -```javascript |
38 | | -mix.spritesmith('src', {options}); |
39 | | -``` |
40 | | - |
41 | | -##### Change Source |
42 | | - |
43 | | -```javascript |
44 | | -mix.spritesmith('resources/assets/images'); |
45 | | -``` |
46 | | - |
47 | | -##### Change Output |
| 39 | +> Wonders are coming... |
48 | 40 |
|
49 | | -```javascript |
50 | | -mix.spritesmith(null, { |
51 | | - imgOutput: 'public/images', |
52 | | - cssOutput: 'public/styles' |
53 | | -}); |
54 | | -``` |
55 | | - |
56 | | -By default, you can use your sprite images with the class `sprite-{itemname}`. Change them with `cssOpt`. |
57 | | - |
58 | | -```javascript |
59 | | -mix.spritesmith(null, { |
60 | | - cssVarMap: function (sprite) { |
61 | | - sprite.name = 'MY-SPRITE-' + sprite.name; |
62 | | - } |
63 | | -} |
64 | | -``` |
65 | 41 |
|
66 | | -And you can use all other options from [Spritesmith](https://github.com/twolfson/gulp.spritesmith). |
0 commit comments