Yii2-icon Phosphor demo - sjaakpriester.nl

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

crown: regular, bold, light, thin, fill, duotone

Code

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

<p>
    <?= Icon::regular( 'crown') ?>
    <?= Icon::bold('crown') ?>
    <?= Icon::light('crown') ?>
    <?= Icon::thin('crown') ?>
    <?= Icon::fill('crown') ?>
    <?= Icon::duotone('crown') ?>
    crown: regular, bold, light, thin, duotone</p>

bold bicycle, all blue

bold bicycle, icon blue

Code

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

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

fill coffee, inverse

Code

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

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

fill coffee, fa-2xs ... fa-2xl

Code

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

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

fill coffee, fa-1x, -2x, -3x, 7x, -10x

Code

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

rotations, flips

Code

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

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

Code

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

spins

Code

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::bold('arrow-clockwise', [ 'class' => 'fa-spin' ]) ?>
    <?= Icon::bold('arrow-counter-clockwise', [ 'class' => 'fa-spin fa-spin-reverse' ]) ?>
    <?= Icon::bold('arrow-clockwise', [ 'class' => 'fa-spin-pulse' ]) ?>
    spins
</p>

border

Code

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

stack

Code

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