【移動應用開發(fā)技術】前端處理小圖標的示例分析

【移動應用開發(fā)技術】前端處理小圖標的示例分析

前言手動操作配置文件var

gulp

=

require('gulp');

var

$

=

require('gulp-load-plugins')();

gulp.task('png',

function

()

{

gulp.src('./src/*.png')

.pipe($.spritesmith({

imgName:

'icon.png',

//參數(shù)，生成圖片文件名

cssName:

'icon.css',

//參數(shù)，生成的樣式文件名

cssTemplate:

'./src/png_template.hbs'

//參數(shù)，樣式文件模板的路徑，默認使用的是handlerbars模板

}))

.pipe(gulp.dest('dist/png'));

});//

主要增加了一個通用樣式，給圖標賦予內聯(lián)塊級樣式

.icon

{

display:

inline-block;

}

{{#sprites}}

.icon-{{name}}

{

background-image:

url({{{escaped_image}}});

background-position:

{{px.offset_x}}

{{px.offset_y}};

width:

{{px.width}};

height:

{{px.height}};

}

{{/sprites}}開發(fā)流程.icon

{

display:

inline-block;

}

.icon-hook

{

background-image:

url(icon.png);

background-position:

-40px

0px;

width:

16px;

height:

16px;

}

.icon-question

{

background-image:

url(icon.png);

background-position:

0px

0px;

width:

40px;

height:

40px;

}//

引用生成的css文件

<link

rel="stylesheet"

href="./png/icon.css"

charset="utf-8">

...

//直接給標簽添加樣式類

<i

class="icon

icon-hook"></i>

<i

class="icon

icon-question"></i>問題font-face

配置文件var

gulp

=

require('gulp');

var

$

=

require('gulp-load-plugins')();

gulp.task('iconfont',

function

()

{

//

先配置樣式，再配置字體文件

return

gulp.src(['src/*.svg'])

.pipe($.iconfontCss({

fontName:

'iconfont',

//字體名

path:

'./src/font_template.css',

//模板文件路徑

cssClass:

'iconfont'

//樣式類名

}))

.pipe($.iconfont({

fontName:

'iconfont',

//字體名

formats:

['ttf',

'eot',

'woff',

'woff2',

'svg']

//輸出的字體文件格式

}))

.pipe(gulp.dest('dist/font'));

});開發(fā)流程@font-face

{

font-family:

"iconfont";

src:

url('./iconfont.eot');

src:

url('./iconfont.eot?#iefix')

format('eot'),

url('./iconfont.woff2')

format('woff2'),

url('./iconfont.woff')

format('woff'),

url('./iconfont.ttf')

format('truetype'),

url('./iconfont.svg#iconfont')

format('svg');

}

.iconfont:before

{

font-family:

"iconfont";

-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;

}

.iconfont-hook:before

{

content:

"\E001";

}

.iconfont-question:before

{

content:

"\E002";

}//

引用生成的css文件

<link

rel="stylesheet"

href="./font/_icons.css"

charset="utf-8">

...

//直接給標簽添加樣式類

<i

class="iconfont

iconfont-hook"></i>

<i

class="iconfont

iconfont-question"></i>使用問題配置文件var

gulp

=

require('gulp');

var

$

=

require('gulp-load-plugins')();

gulp.task('svg',

function

()

{

return

gulp.src('./src/*.svg')

.pipe($.svgSprite({

mode:

{

symbol:

{

prefix:

`.svg-`,

dimensions:

'%s',

sprite:

'../icon.svg',

symbol:

true,

render:

{

css:

{

dest:

'../icon.css'

}

}

}

}

}))

.pipe(gulp.dest('dist/svg'));

});開發(fā)流程.svg-hook

{

width:

16px;

height:

16px;

}

.svg-question

{

width:

40px;

height:

40px;

}//引用樣式文件

<link

rel="stylesheet"

href="./svg/icon.css"

charset="utf-8">

...

<svg

class="svg-hook">

<use

xlink:href="