gulp iconfont

時間 2019-11-21

原文原文鏈接

參考以下網站css

https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-7-24/gulp-test-iconfonthtml

gulpfile.jsgit

var gulp = require('gulp');
var iconfont = require('gulp-iconfont');

var iconfontCss = require('gulp-iconfont-css');

var template = require('gulp-template');
var fs = require('fs');

var icons = fs.readdirSync('src/style/svg');

icons = icons.map(function(icon) {
    return icon.replace(/\.\w+$/, '');
});

var cssName = 'iconfont'; //生成的css名稱
gulp.task('icon', function() {
    let dirname = 'src/style';
    return gulp
        .src([`${dirname}/svg/*.svg`])

        .pipe(
            iconfontCss({
                fontName: 'iconfont', // iconfont.css的font-family值
                path: `${dirname}/template/iconfont.template.less`, //css模版文件
                targetPath: `../${cssName}.css`, //css生成文件
                fontPath: 'fonts/' //iconfont.template.less文件中的fontPath
            })
        )
        .pipe(
            iconfont({
                fontName: 'iconfont',
                formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
                normalize: true
            })
        )
        .pipe(gulp.dest(`${dirname}/fonts`)); //svg的字體文件存放位置
});

gulp.task('example', function() {
    let dirname = 'src/style';
    gulp.src(`${dirname}/example/index.html`) //樣式例子文件
        .pipe(template({ icons: icons, cssName: cssName }))
        .pipe(gulp.dest(`${dirname}`)); //樣式例子文件存放位置
});
gulp.task('default', ['icon', 'example']);

iconfont-template.lessgithub

@font-face {
    font-family: "<%= fontName %>";
    src: url('<%= fontPath %><%= fontName %>.eot');
    src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
        url('<%= fontPath %><%= fontName %>.woff') format('woff'),
        url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
        url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon:before {
    font-family: "<%= fontName %>";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
    text-decoration: none;
    text-transform: none;
}

<% _.each(glyphs, function(glyph) { %>
.icon-<%= glyph.fileName %>:before {
    /* content: "\<%= JSON.stringify(glyph) %>";*/
    content: "\<%= glyph.codePoint %>";

}
<% }); %>

example/index.htmlweb

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>icon font test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<%= cssName%>.css">
    <style>
        .icon_lists li{
          float:left;
          width: 120px;
          height:170px;
          text-align: center;
          list-style: none;
        }
        .icon_lists .icon{
          font-size: 42px;
          margin: 10px 0;
          color:#333;
          -webkit-transition: font-size 0.25s ease-out 0s;
          -moz-transition: font-size 0.25s ease-out 0s;
          transition: font-size 0.25s ease-out 0s;

        }
        .icon_lists .icon:hover{
          font-size: 120px;
        }
        .name {
          font-size: 16px;
        }

        .clear:after {
          content: '\20';
          display: block;
          height: 0;
          clear: both;
        }
    </style>
</head>

<body>
    <h2>Icon Font</h2>
    <ul class="icon_lists clear">
    <% _.each(icons, function(icon) { %>
       <li class="icon icon-<%= icon %>">
          <div class="name"><%= icon%></div>
       </li>
    <% }); %>
    </ul>
   <div>
     <h2>Use Icon Font</h2>
     <pre>
      &lt;span class=&quot;icon icon-add&quot;&gt;&lt;/span&gt;
     </pre> 
   </div>    
</body>
</html>

執行語句gulp

gulp iconapp

gulp exampleless

與svg

gulp.task('example', function() {....
中的task值相同

gulpfile.js文件中增長

　　gulp.task('default', ['icon', 'example']);

　就能夠直接gulp生成font，css ，html



=====缺點
生成的font字體 1.只能是黑白色調， 2.svg圖片中若是有線條重合，就會被重疊消除爲白色【這個問題在icomoon網站中也存在】

=====總結
https://icomoon.io/app/ 這個網站生成font字體，仍是不錯的


【第一種缺點是沒有顏色】

第二種生成iconfont方式【能夠有顏色】

gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');
var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');

var template = require('gulp-template');
var fs = require('fs');

var icons = fs.readdirSync('src/style/svg');

icons = icons.map(function(icon) {
    return icon.replace(/\.\w+$/, '');
});

gulp.task('icon', function() {
    let dirname = 'src/style';
    return gulp
        .src([`${dirname}/svg/*.svg`])
        .pipe(
            iconfont({
                fontName: 'iconfont1',
                formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
                normalize: true,
                options: {
                    fixedWidth: false,
                    normalize: false,
                    // fontHeight: 512,
                    // descent: -32
                },
                // prependUnicode: true // 會修改掉svg的名字
            })
        )
        .on('glyphs', function(glyphs, options) {
            gulp.src(`${dirname}/iconfont.template.1.less`)
                .pipe(
                    consolidate('lodash', {
                        glyphs: glyphs.map(function(glyph) {
                            glyph.unicode = glyph.unicode[0]
                                .charCodeAt(0)
                                .toString(16)
                                .toUpperCase(); // unicode是16進制的 return glyph;
                        }),
                        fontName: options.fontName,
                        // glyphs: glyphs,
                        fontPath: 'fonts/'
                    })
                )
                .pipe(rename(`${options.fontName}.css`))
                .pipe(gulp.dest(dirname));
        })
        .pipe(gulp.dest(`${dirname}/fonts`));
});

gulp.task('example', function() {
    let dirname = 'src/style';
    gulp.src(`${dirname}/example/index.1.html`)
        .pipe(template({ icons: icons }))
        .pipe(gulp.dest(`${dirname}`));
});

gulp.task('default', ['icon', 'example']);

iconfont-template.less
中循環語句修改

<% _.each(glyphs, function(glyph) { %>
.icon-<%= glyph.name %>:before {
    /* content: "\<%= JSON.stringify(glyph) %>";*/
    content: "\<%= glyph.unicode %>";
    <%= glyph.color?'color:'+glyph.color :null %>
}
<% }); %>

1. iconFont
2. iconfont
3. iconfont實踐小結
4. gulp總結
5. iconfont symbol
6. sprite&iconfont
7. Gulp 插件
8. gulp 插件之 gulp-useref 和 gulp-if
9. gulp 插件之 gulp-less，gulp-sass 和 gulp-sourcemaps
10. gulp
更多相關文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。