PHPackages sjaakp/yii2-icon - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. sjaakp/yii2-icon ActiveYii2-extension[Utility & Helpers](/categories/utility) sjaakp/yii2-icon ================ Raw SVG icons in Yii2 1.2.1(2y ago)14.8kMITPHP Since Apr 11Pushed 2y ago1 watchersCompare [ Source](https://github.com/sjaakp/yii2-icon)[ Packagist](https://packagist.org/packages/sjaakp/yii2-icon)[ RSS](/packages/sjaakp-yii2-icon/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (6)Dependencies (1)Versions (7)Used By (0) yii2-icon ========= [](#yii2-icon) ### Raw SVG symbols in Yii2 [](#raw-svg-symbols-in-yii2) [![Latest Stable Version](https://camo.githubusercontent.com/2adfa4559a02c1b9e490f9feb1bc8b51a6eae337466976c97502ef30682778be/68747470733a2f2f706f7365722e707567782e6f72672f736a61616b702f796969322d69636f6e2f762f737461626c65)](https://packagist.org/packages/sjaakp/yii2-collapse)[![Total Downloads](https://camo.githubusercontent.com/8b07dc5a0bd06361220b1171a880368e36c829186211856db33618bd9711a742/68747470733a2f2f706f7365722e707567782e6f72672f736a61616b702f796969322d69636f6e2f646f776e6c6f616473)](https://packagist.org/packages/sjaakp/yii2-collapse)[![License](https://camo.githubusercontent.com/a6cdf2360c13ddffa9cbf10eed7cced15857404a46ce876e28e19b61ac10701f/68747470733a2f2f706f7365722e707567782e6f72672f736a61616b702f796969322d69636f6e2f6c6963656e7365)](https://packagist.org/packages/sjaakp/yii2-collapse) Probably the best way to embed icons like those from [FontAwesome](https://fontawesome.com/)on your website is to use [bare SVGs](https://fontawesome.com/docs/web/add-icons/svg-bare)as [SVG symbols](https://fontawesome.com/docs/web/add-icons/svg-symbols). The SVG-code of the icons is embedded in the page. Therefore no extra font file has to be downloaded, no JavaScript needs to run at page set up, and the browser will render the icons as fast as possible. At the downside, this requires a bit more coding. Until now, that is; because now there is **yii2-icon**. This provides a helper class for [Yii 2.0](https://www.yiiframework.com/) that takes the burden out of icons based on bare SVG Symbols. A demonstration of **yii2-icon** is [here](http://www.sjaakpriester.nl/software/icon). **yii2-icon**'s GitHub-page is [here](https://github.com/sjaakp/yii2-icon). Installation ------------ [](#installation) Install **yii2-icon** in the usual way with [Composer](https://getcomposer.org/). Add the following to the require section of your `composer.json` file: `"sjaakp/yii2-icon": "*"` or run: `composer require sjaakp/yii2-icon` You can manually install **yii2-icon** by [downloading the source in ZIP-format](https://github.com/sjaakp/yii2-icon/archive/master.zip). Setup ----- [](#setup) For **yii2-icon** to work, some icon collection has to be installed on your site as well. In many cases this will be installed via [`npm`](https://www.npmjs.com/), other collections (notably [FontAwesome Free](https://fontawesome.com/)) via [Composer](https://getcomposer.org/). Refer to the icon provider's web site for details. In any case, an application parameter named `'icons'`has to be defined. This should describe the location of the icon files. The value may, and preferably should, be an [Yii2 alias](https://www.yiiframework.com/doc/guide/2.0/en/concept-aliases). As an example, for **FontAwesome Free**, installed via `composer`, this will be: `'@vendor/fortawesome/font-awesome/svgs/{family}/{name}.svg'` - `{family}` will be replaced by the icon family (like `'regular'`, `'solid'`, or `'thin'`). - `{name}` will be replaced by the icon name (like `'bicycle'`, `'chess-queen'`, or `'arrow-down'`). - `{phosphor}` will be replaced by a combination of icon family and icon name as expected by [Phosphor Icons](https://phosphoricons.com/). Icon families and names can be found at the icon provider's site. As another example, for **FontAwesome Pro**, installed via `npm`, application parameter `'icons'` should be: `'@app/node_modules/@fortawesome/fontawesome-pro/svgs/{family}/{name}.svg'` The preferred way to set the application parameter is to add it to `'params'`-section of the main site configuration (often `web.php`, or `main.php` in the `config`-directory). The `'params'`-section may look something like this: ``` 'params' => [ 'adminEmail' => 'info@example.com', 'supportEmail' => 'support@example.com', 'icons' => '@vendor/fortawesome/font-awesome/svgs/{family}/{name}.svg', // ... probably more parameters ... ], ``` If application parameter `'icons'` is not set, **yii2-icon** will throw an error. Next, the main layout view of the site (probably `'views/layouts/main.php'`) should be modified. At the top of the `body`-section, **yii2-icon**'s class `Icon` has to render the SVG-symbols. The beginning of the main layout view should look something like this: ``` ... ... // ... ``` Using yii2-icon --------------- [](#using-yii2-icon) If everything is set up correctly, you can render icons anywhere in any view. For example, to render an icon of the `regular` family, just use something like this: ``` ``` Likewise for the other families: ``` ``` If an icon collection has no families, like the [Bootstrap Icons](https://icons.getbootstrap.com/), an icon can be rendered with: ``` ``` Styling ------- [](#styling) Icons can be extended with HTML options, like so: ``` ``` By default, **yii2-icon** includes the [FontAwesome styling classes](https://fontawesome.com/docs/web/style/styling), even for other font collections. This means that classes such as `fa-lg`, `fa-rotate-90`, will work out of the box. For example: ``` ``` Class Icon ---------- [](#class-icon) All functionality of **yii2-icon** is bundled in one abstract class, `sjaakp\icon\Icon`. It has only abstract functions: - **renderIcon($fam, $name, $options = \[\])** - render icon witn name `$name`from family `$fam`. Returns HTML. - **symbols($view)** - render the symbol table in [View](https://www.yiiframework.com/doc/guide/2.0/en/structure-views) `$view`, preferably a [Layout](https://www.yiiframework.com/doc/guide/2.0/en/structure-views#layouts). Returns HTML. - **reset()** - reset **yii2-icon**'s status from application parameter `'icons'`. May come in handy in case of multiple icon collections. **All other function calls** will be translated in a call to **renderIcon**, where the function name will be the value of `$fam`. Therefore, a function call like: ``` Icon::regular('bicycle', [ ]); ``` will be interpreted as: ``` Icon::renderIcon('regular', 'bicycle', [ ]); ``` How icons are rendered ---------------------- [](#how-icons-are-rendered) Suppose we have a page with ``in it. It will be rendered like: ``` ... ... ... ... ... ``` Gotcha ------ [](#gotcha) Icons in the main layout file may not be rendered if they come *after* the symbol table. One way to avoid this problem is by assigning the icon to a PHP-variable, like so: ``` ... ... // ... Render house icon: . // ... ``` Advanced setup -------------- [](#advanced-setup) In stead of the description of the icon SVG files location, the value of the application parameter `'icons'` may also be an array with the following members: - **location** - the location of the icon SVG files, like previous described. Must be provided. - **faCss** - Optional. Whether Icon registers Font Awesome styling CSS. Default: `true`. - **template** - Optional. The template used for forming the icon's HTML id from the family and name. Default and example: `'i-{family}-{name}'`. - **iconClass** - Optional. The CSS class(es) assigned to icons. Default: `'svg-inline--fa'`. Some icon resources ------------------- [](#some-icon-resources) Name@icons[FontAwesome Free](https://fontawesome.com/)`'@vendor/fortawesome/font-awesome/svgs/{family}/{name}.svg'`[FontAwesome Pro](https://fontawesome.com/)`'@node/@fortawesome/fontawesome-pro/svgs{family}/{name}.svg'`[Google Material Icons](https://fonts.google.com/icons)`'@node/@material-design-icons/svg{family}/{name}.svg'`[Feather](https://feathericons.com/)`'@node/feather-icons/dist/icons/{name}.svg'`[Bootstrap Icons](https://icons.getbootstrap.com/)`'@vendor/twbs/bootstrap-icons/icons/{name}.svg'` `'@node/bootstrap-icons/icons/{name}.svg'`[Phosphor Icons](https://phosphoricons.com/)`'@app/phosphor-icons/{phosphor}.svg'`[Teeny Icons](https://teenyicons.com/)`'@node/teenyicons/{family}/{name}.svg'`[Microsoft Fluent Icons](https://fluenticons.co/)`'@node/@fluentui/svg-icons/icons/{name}_24_{family}.svg'`(Notice: `'@node'` is an alias for `'@app/node_modules'`.) ### Health Score 28 — LowBetter than 54% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community7 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~137 days Recently: every ~168 days Total 6 Last Release 808d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/156f636aceedc73021a2bfafb5433271c2c55d6cf4bce06b12902c85b4b491f1?d=identicon)[sjaakp](/maintainers/sjaakp) --- Top Contributors [![sjaakp](https://avatars.githubusercontent.com/u/5585878?v=4)](https://github.com/sjaakp "sjaakp (8 commits)") --- Tags svgyii2yiiiconFontAwesome ### Embed Badge ![Health badge](/badges/sjaakp-yii2-icon/health.svg) ``` [![Health](https://phpackages.com/badges/sjaakp-yii2-icon/health.svg)](https://phpackages.com/packages/sjaakp-yii2-icon) ``` ### Alternatives [kartik-v/yii2-icons Set of icon frameworks for use in Yii Framework 2.0 73970.3k34](/packages/kartik-v-yii2-icons)[brussens/yii2-maintenance-mode Maintenance mode component for Yii framework 2.x.x version. 78256.3k5](/packages/brussens-yii2-maintenance-mode) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)