Icons

Principe général

Il existe plusieurs façons de gérer les pictos sur un projet :

via une fonticon (librairie fontawesome ou fonticon sur mesure)
via un sprite svg
via des fichiers svg en dur

Chaque solution a ses avantages et ses inconvénients.

Fonticon sur mesure

Via gulp et à partir des fichiers svg sélectionnés, une fonticon est générée et les pictos sont disponibles via la balise i et la classe .ico-xxxxx.

address-card

analytics

angle-double-down

angle-double-left

angle-double-right

angle-double-up

angle-down

angle-left

angle-right

angle-up

tags

tasks-alt

temperature-low

thermometer-half

times-circle

times

toggle-off

toggle-on

trash-alt

trash

trophy

truck

umbrella

universal-access

unlock-alt

unlock

user-alt

user-circle

user-friends

user

users-class

users

vial

wreath

wrench

gulp

// ICONS > FONTS & LESS
function ico1() {
    return src(config.ico.src)
        .pipe(
            iconfontCss({
                cssClass: config.ico.cssClass,
                fontName: config.ico.fontName,
                fontPath: config.ico.fontPath,
                path: config.ico.lessTemplate,
                targetPath: config.ico.lessPath,
                cacheBuster: config.ico.cacheBuster
            })
        )
        .pipe(
            iconfont({
                fontName: config.ico.fontName,
                formats: config.ico.formats
            })
        )
        .pipe(dest(config.ico.fontDest));
}

// ICONS > PLANCHE CONTACT
function ico2() {
    return src(config.ico.src)
        .pipe(
            iconfontTemplate({
                cssClass: config.ico.cssClass,
                fontName: config.ico.fontName,
                path: config.ico.phpTemplate,
                targetPath: config.ico.phpPath
            })
        )
        .pipe(dest(config.ico.out));
}

exports.ico = series(ico1, ico2, css, watcher);

scss

@mixin ico-styles {
	font-family:"icons"; 
    -webkit-font-smoothing:antialiased; 
    -moz-osx-font-smoothing:grayscale; 
    font-style:normal; font-variant:normal; font-weight:normal; 
    text-decoration:none; text-transform:none;
}

%ico { @include ico-styles; }

@function ico-char($filename) {
	$char: "";
	@if $filename == account { $char:"\E001"; }
	@if $filename == arrow-down { $char:"\E002"; }
	@return $char;
}

@mixin ico($filename, $insert: before, $extend: true) {
	&:#{$insert} {
		@if $extend {
			@extend %ico;
		} @else {
			@include ico-styles;
		}
		content: ico-char($filename);
	}
}

.ico-account {
	@include ico(account);
}
.ico-arrow-down {
	@include ico(arrow-down);
}

// Usage scss
.toto {
	@include ico-styles;
    &:before { content: ico-char(account); }
}

Sprite SVG

Via gulp et à partir des fichiers svg sélectionnés, un fichier sprite est généré et les pictos sont disponibles via une balise svg avec l'id correspondant pour n'afficher que celui concerné.

angle-left

arrow-right

building

cactus

capsules

crop

cup

cup-fill

cup-hot

cup-hot-fill

cup-straw

gulp

// SPRITE SVG
function spritesvg() {
    return src(config.sprite.src)
        .pipe(plumber())
        .pipe(svgSprite({
            mode: {
                symbol: { 
                    dest: './',
                    sprite: 'sprite.svg',
                    render: {
                        symbol: {
                            template: config.sprite.htmlTemplate,
                            dest: config.sprite.htmlDest
                        }
                    }
                }
            }
        }))
        .pipe(dest(config.sprite.out));
}

PHP

$svgId = 'capsules';
include('inc/compo/svgsprite.php');