Yii2-icon Bootstrap demo - sjaakpriester.nl

Bootstrap 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.

icon cart4, all blue

icon cart4, icon blue

Code

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

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

icon cup-fill, inverse

Code

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

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

icon cup-fill, fa-2xs ... fa-2xl

Code

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

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

icon cup-fill, fa-1x, -2x, -3x, 7x, -10x

Code

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

rotations, flips

Code

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

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

Code

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

spins

Code

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

border

Code

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

stack

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p><span class="fa-stack">
    <?= Icon::icon('camera-fill', [ 'class' => 'fa-stack-1x' ]) ?>
    <?= Icon::icon('slash-circle', [ '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::icon('bookmark-fill', [ 'class' => 'red' ]) ?>
        <span class="fa-layers-text new-text">NEW!</span>
    </span>
    <span class="fa-layers fa-fw fa-2x">
        <?= Icon::icon('envelope-fill') ?>
        <span class="fa-layers-counter">99</span>
    </span> text, counter
</p>