PHPackages                             robwdwd/svg-icon-bundle - 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. robwdwd/svg-icon-bundle

AbandonedArchivedSymfony-bundle[Utility & Helpers](/categories/utility)

robwdwd/svg-icon-bundle
=======================

SVG Icon bundle for inserting SVG HTML Markup from SVG Icon files.

v1.0.6(2y ago)52.6k1Apache-2.0PHPPHP >=8.1

Since Apr 23Pushed 1y ago1 watchersCompare

[ Source](https://github.com/robwdwd/svg-icon-bundle)[ Packagist](https://packagist.org/packages/robwdwd/svg-icon-bundle)[ Docs](https://github.com/robwdwd/svg-icon-bundle)[ RSS](/packages/robwdwd-svg-icon-bundle/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (7)Dependencies (7)Versions (8)Used By (0)

SVGIcon Symfony Bundle
======================

[](#svgicon-symfony-bundle)

Symfony Bundle for reading SVG Files and outputting in HTML Markup.

What is the SVGIcon Bundle?
---------------------------

[](#what-is-the-svgicon-bundle)

SVGIcon is a symfony bundle to read SVG files (such as material design icons, bootstrap icons, etc) and can be used to output inline HTML either with the twig function or by using SVGIcon as a service.

Features
--------

[](#features)

SVGIcon supports the following:

- Twig function for easy output of inline HTML in templates.
- Reads SVG Icon files (from bootstrap-icons, material design icons.)
- Overwrite styles and tags (width, height, etc) and provides useful defaults if not found in SVG Icon.
- Support webpack encore for icons in public build location using manifest file.

Requirements
------------

[](#requirements)

SVGIcon PHP Class requires the following:

- PHP 7.4 or higher
- meyfa/php-svg

Installation
------------

[](#installation)

Make sure Composer is installed globally, as explained in the [installation chapter](https://getcomposer.org/doc/00-intro.md)of the Composer documentation.

### Applications that use Symfony Flex

[](#applications-that-use-symfony-flex)

Open a command console, enter your project directory and execute:

```
composer require robwdwd/svg-icon-bundle
```

### Applications that don't use Symfony Flex

[](#applications-that-dont-use-symfony-flex)

#### Step 1: Download the Bundle

[](#step-1-download-the-bundle)

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

```
composer require robwdwd/svg-icon-bundle
```

#### Step 2: Enable the Bundle

[](#step-2-enable-the-bundle)

Then, enable the bundle by adding it to the list of registered bundles in the `config/bundles.php` file of your project:

```
// config/bundles.php

return [
    // ...
    Robwdwd\SVGIconBundle\SVGIconBundleBundle::class => ['all' => true],
];
```

Configuration
-------------

[](#configuration)

Configuration is done in `config/packages/robwdwd_svg_icon.yaml` although this can be any filename.

Here is an example configuration using webpack encore for material design icons and a normal file path for bootstrap icons.

```
svg_icon:
    icons:
        mdi:
            base_dir: '%kernel.project_dir%/public'
            icon_dir: 'build/icons/mdi'
            width: 24
            height: 24
            webpack: true
        bsi:
            base_dir: '%kernel.project_dir%'
            icon_dir: 'node_modules/bootstrap-icons/icons'
            webpack: false
```

For webpack encore managed icons the `base_dir` for each icon should be the public directory of your symfony project and the `icon_dir` should be the build directory and the subdirectory under it where webpack encore copies the icon files. The `icon_dir` plus the icon filename is used to lookup the icon in the webpack manifest.json.

For icons not managed by webpack Encore (for example directly from the node\_modules directory) set the `base_dir` to be `%kernel.project_dir%` and the `icon_dir` to be the location under and including node\_modules. However `icon_dir` and `base_dir` are simply concatenated together for icon packages not managed by webpack encore.

Icon installation
-----------------

[](#icon-installation)

Icons should be installed as per the normal icon installation process. For example to install bootstrap icons and material design icons.

```
yarn add bootstrap-icons --dev
yarn add @mdi/svg --dev
```

Webpack Encore
--------------

[](#webpack-encore)

Use webpack encore to copy the SVG icons to your build directory by using [copyFiles](https://symfony.com/doc/current/frontend/encore/copy-files.html). The following example copies the material design icons to your public build directory under icons/mdi and the boostrap icons under icons/bsi. Versioning will be used if you have it enabled.

With webpack set to true in the configuration file the bundle will load the icon file by looking up it's location in the default webpack manifest.

```
.copyFiles({
        from: './node_modules/@mdi/svg/svg',
        to: 'icons/mdi/[path][name].[hash:8].[ext]',
        pattern: /\.svg$/
    })

.copyFiles({
        from: './node_modules/bootstrap-icons/icons',
        to: 'icons/bsi/[path][name].[hash:8].[ext]',
        pattern: /\.svg$/
    })
```

Usage and Examples
------------------

[](#usage-and-examples)

The bundle provides a twig function and a service to load and get the HTML for SVG icons.

### Default attributes and styles

[](#default-attributes-and-styles)

By default the bundle sets width and height to 16 and the viewBox to 0 0 16 16 and fill to currentColor. These will be used if the SVG icon does not already have these attributes and you have not overridden them in the twig call.

Attributes set in the twig call will always beused over the attributes/styles in the SVG file and the defaults. SVG File always overrides the default.

Width and height are optional configuration for icon packages and will override the bundle default, the icon width and height attributes but not any width and height in the template call.

The bundle takes the follow precedence order: Default->SVG File->Dimensions->Twig Call.

### Twig

[](#twig)

The SVGIcon bundle provides a twig function to inline SVG icon HTML markup into templates. The function takes the icon package name and the name of the icon (filename without the .svg extension). It allows for optional attributes and styles to be applied to the icon.

```
    svg_icon('', '', {[attributes]}, {[styles]})
```

#### Simple use

[](#simple-use)

To embed to Material design pencil icon into your html use the following. Any attributes and styles from the icon will be used as well as the defaults if the icon does not include them.

```
    {{ svg_icon('mdi', 'pencil') }}
```

#### Advanced use

[](#advanced-use)

To overwrite the width and height attributes.

```
    {{ svg_icon('mdi', 'eye-outline', {'width': 18, 'height': 18}) }}
```

Set the width and height and class and set the fill colour to red.

```
    {{ svg_icon('mdi', 'eye-outline', {'width': 18, 'height': 18, 'class':'svgicon'}, {'fill':'red'}) }}
```

You can also set the fill colour as an attribute which will get converted into a style automatically. Any attribute which should be a style will be converted.

```
    {{ svg_icon('mdi', 'eye-outline', {'width': 18, 'height': 18, 'class':'svgicon', 'fill':'red'}) }}
```

### As a service

[](#as-a-service)

You can use the SVGIcon service in your controllers or services to manually generate SVGIcons.

```
use Robwdwd\SVGIconBundle\SVGIcon;

class HomeController extends AbstractController
{
    /**
     * @Route("/", name="homepage")
     */
    public function homepage(SVGIcon $svgIcon) {

        // Load the SVG
        $svgIcon->loadSVG('mdi', 'magnify', ['class' => 'svgicon'], ['fill' => 'currentColor']);

        // Get HTML for SVG
        $searchIcon = $svgIcon->toXMLString();

        // HTML with XML header
        dump($svgIcon->toXMLString(true));

        return $this->render('index.html.twig', ['search_icon' => $searchIcon]);
    }
}
```

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance29

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity65

Established project with proven stability

 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 ~173 days

Recently: every ~141 days

Total

7

Last Release

802d ago

PHP version history (3 changes)v1.0.0PHP ^7.2

v1.0.2PHP >=7.4

v1.0.5PHP >=8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/e903ba42666b96d89ee98cade6216e36eb52a694622d97a51694085d1f22c126?d=identicon)[robwdwd](/maintainers/robwdwd)

---

Top Contributors

[![robwdwd](https://avatars.githubusercontent.com/u/25034043?v=4)](https://github.com/robwdwd "robwdwd (31 commits)")

---

Tags

svg-iconssymfonysymfony-bundlesymfonysvgiconBootstrap Iconsmdimaterialdesign icons

###  Code Quality

Static AnalysisRector

### Embed Badge

![Health badge](/badges/robwdwd-svg-icon-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/robwdwd-svg-icon-bundle/health.svg)](https://phpackages.com/packages/robwdwd-svg-icon-bundle)
```

###  Alternatives

[pentatrion/vite-bundle

Vite integration for your Symfony app

2725.3M13](/packages/pentatrion-vite-bundle)[shopware/platform

The Shopware e-commerce core

3.3k1.5M3](/packages/shopware-platform)[sulu/sulu

Core framework that implements the functionality of the Sulu content management system

1.3k1.3M152](/packages/sulu-sulu)[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.0k15.4k](/packages/prestashop-prestashop)[scheb/2fa

Two-factor authentication for Symfony applications (please use scheb/2fa-bundle to install)

578630.7k1](/packages/scheb-2fa)[scheb/2fa-bundle

A generic interface to implement two-factor authentication in Symfony applications

6914.0M61](/packages/scheb-2fa-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)