Yii2-icon Fluent demo - sjaakpriester.nl

Microsoft Fluent Icons raw SVG icons in Yii2

Yii2-icon renders icons from SVG symbols. This is the fastest and most efficient way to display icons in your view. Take a peek at the source HTML of this page to see how it works.

animal_cat: regular, filled

Code

<?php
use sjaakp\icon\Icon;
?>

<p>
    <?= Icon::regular('animal_cat') ?>
    <?= Icon::filled( 'animal_cat') ?>
    animal_cat: regular, filled</p>

filled vehicle_bicycle, all blue

filled vehicle_bicycle, icon blue

Code

<?php
use sjaakp\icon\Icon;
?>

<p class="blue"><?= Icon::filled('vehicle_bicycle') ?> filled bicycle, all blue</p>
<p><?= Icon::filled('vehicle_bicycle', [ 'class' => 'blue' ]) ?> filled vehicle_bicycle, icon blue</p>

filled drink_coffee, inverse

Code

<?php
use sjaakp\icon\Icon;
?>

<p>
    <?= Icon::filled('drink_coffee') ?>
    <span class="bg-blue"> <?= Icon::filled('drink_coffee', [ 'class' => 'fa-inverse' ]) ?> </span>
    filled drink_coffee, inverse
</p>

filled drink_coffee, fa-2xs ... fa-2xl

Code

<?php
use sjaakp\icon\Icon;
?>

<p>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-2xs' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-xs' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-sm' ]) ?>
    <?= Icon::filled('drink_coffee') ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-lg' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-xl' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-2xl' ]) ?>
    filled drink_coffee, fa-2xs ... fa-2xl
</p>

filled drink_coffee, fa-1x, -2x, -3x, 7x, -10x

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-1x' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-2x' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-3x' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-7x' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-10x' ]) ?>
    filled drink_coffee, fa-1x, -2x, -3x, 7x, -10x
</p>

rotations, flips

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::filled('drink_coffee') ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-rotate-90' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-rotate-180' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-rotate-270' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-rotate-by', 'style' => '--fa-rotate-angle: 45deg;' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-flip-horizontal' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-flip-vertical' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-flip-both' ]) ?>
    rotations, flips
</p>

beat, fade, beat-fade, bounce, flip, shake

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-beat' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-fade' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-beat-fade' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-bounce' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-flip' ]) ?>
    <?= Icon::filled('drink_coffee', [ 'class' => 'fa-shake' ]) ?>
    beat, fade, beat-fade, bounce, flip, shake
</p>

spins

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::filled('arrow_clockwise', [ 'class' => 'fa-spin' ]) ?>
    <?= Icon::filled('arrow_counterclockwise', [ 'class' => 'fa-spin fa-spin-reverse' ]) ?>
    <?= Icon::filled('arrow_clockwise', [ 'class' => 'fa-spin-pulse' ]) ?>
    spins
</p>

border

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p><?= Icon::filled('drink_coffee', [ 'class' => 'fa-border' ]) ?> border</p>

stack

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p><span class="fa-stack">
    <?= Icon::filled('camera', [ 'class' => 'fa-stack-1x' ]) ?>
    <?= Icon::filled('prohibited', [ 'class' => 'fa-stack-2x tomato' ]) ?>
  </span> stack
</p>

NEW! 99 text, counter

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p><span class="fa-layers fa-fw fa-2x">
        <?= Icon::filled('bookmark', [ 'class' => 'red' ]) ?>
        <span class="fa-layers-text new-text">NEW!</span>
    </span>
    <span class="fa-layers fa-fw fa-2x">
        <?= Icon::filled('mail') ?>
        <span class="fa-layers-counter">99</span>
    </span> text, counter
</p>