PHPackages                             slashworks/contao-simple-svg-icons-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. slashworks/contao-simple-svg-icons-bundle

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

slashworks/contao-simple-svg-icons-bundle
=========================================

Simply use SVG icons from an SVG icon sprite file with Contao inserttags.

v3.1.1(2mo ago)72.9k4[1 issues](https://github.com/slashworks/contao-simple-svg-icons-bundle/issues)1LGPL-3.0-or-laterPHPCI failing

Since May 10Pushed 2mo agoCompare

[ Source](https://github.com/slashworks/contao-simple-svg-icons-bundle)[ Packagist](https://packagist.org/packages/slashworks/contao-simple-svg-icons-bundle)[ RSS](/packages/slashworks-contao-simple-svg-icons-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (16)Versions (22)Used By (1)

Contao 4 & 5 Simple SVG Icons Bundle
========================================

[](#contao-4--5-simple-svg-icons-bundle)

About
-----

[](#about)

With this extension you can easily add SVG icons from an icon-sprite file to your website via Contao Inserttags.
It also allows to output inline SVG from an SVG file in the file system.

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

[](#installation)

Install with `composer require slashworks/contao-simple-svg-icons`.
After updating the database, select the SVG icon sprite file in the settings of your theme. Use the new field **icon files** to select the SVG icon sprite file. The icons you can use are taken from this file.
For an easy start, download the [example-sprite.svg](example-sprite.svg) and place it inside the files folder of your contao installation.

An SVG icon sprite file is a collection of multiple SVG icons, defined within a ``.
The menu icon for example looks like this:

```

```

The important part for using this icon is the **id** of the symbol.

For further information about creating your own SVG icon sprite file you can check out [A Guide to Create and Use SVG Sprites](https://w3bits.com/svg-sprites/).

Usage
-----

[](#usage)

### SVG Sprite

[](#svg-sprite)

When you want to output a symbol from an SVG sprite, the base format is
`{{svg::ICON_ID}}`.
The rendered output:

```

    …

```

### Inline SVG

[](#inline-svg)

You can also output an SVG file inline.
Instead of the symbol's id you have to provide the UUID of the SVG file in the file system:
`{{svg::a8824458-a08e-11e9-9d96-81cb79fa7a74}}`
The rendered output:

```

    …

```

---

Parameters
----------

[](#parameters)

You can pass additional parameters to the insert tag:

**class:** `{{svg::ICON_ID|UUID?class=my-css-class}}`
This adds the given string as CSS class to the svg element and will be rendered as:

```
…
```

**id:** `{{svg::ICON_ID|UUID?id=my-css-id}}`
This adds the given string as CSS ID to the svg element and will be rendered as:

```
…
```

**width**: `{{svg::UUID?width=120}}`
The width parameter only works with inline SVG.
If the width property is set without a height property, the extension tries to get the aspect ratio from already existing width/height attributes or the viewBox attribute and sets the height accordingly. You can always overwrite this with CSS.

**height**: `{{svg::UUID?height=80}}`
The height parameter only works with inline SVG.
If the height property is set without a width property, the extension tries to get the aspect ratio from already existing width/height attributes or the viewBox attribute and sets the width accordingly. You can always overwrite this with CSS.

You can use multiple parameters in any combination:
`{{svg::UUID?width=120}}`
`{{svg::UUID?height=80&class=custom-icon}}`
`{{svg::ICON_ID|UUID?id=my-icon-id&class=custom-icon-class}}`

Tips
----

[](#tips)

The main purpose for svg icons is to use them in conjuction with text, e. g. menu burger, contact information, slider ui elements, …. As a starting point for the CSS styling of the svg icons you could use the following definitions:

```
.svg-inline {
    fill: currentColor;
    height: auto;
    width: 1em;
}
```

This will scale the icon according to the font-size of the parent element.
Additionally, the vertical positioning requires some further adjustments for fine tuning. You can try to use **vertical-align**, **relative** positioning with some **top** or **bottom** values, or make the parent a **flex**-container and use **align-items** to properly position the enclosed icon.

Example: Burger Menu
--------------------

[](#example-burger-menu)

Lets walk through a burger menu example.
We want to use the icon\_menu\_24px from the example sprite, so our inserttag looks like this:

```
{{svg::icon_menu_24px}}

```

---

The HTML code with the inserttag:

```

    Menu {{svg::icon_menu_24px}}

```

[![Burger menu in its initial state](screenshots/step-1.png)](screenshots/step-1.png)

---

After setting the font-size for the button and the width for the svg, it will look like this:

```
button {
    font-size: 1em;
}

button .svg-inline {
    width: 1.5em;
}
```

[![Burger menu with font-size and icon width](screenshots/step-2.png)](screenshots/step-2.png)

---

Finally we adjust the vertical alignment of the icon:

```
button {
    align-items: center;
    display: inline-flex;
}

button svg {
    margin-left: 5px;
}
```

[![Burger menu with correct icon alignment](screenshots/step-3.png)](screenshots/step-3.png)

---

When using the recommended CSS from the tips section, the SVG icon will inherit `color` from the button.

```
button:hover {
    color: red;
}
```

[![Burger menu hover](screenshots/button-hover.gif)](screenshots/button-hover.gif)

---

Of course you can define a different color for the SVG icon itself:

```
button:hover svg {
    color: green;
}
```

[![Burger menu hover with separate icon color](screenshots/button-hover-multi-color.gif)](screenshots/button-hover-multi-color.gif)

---

Backend widget for icon selection
---------------------------------

[](#backend-widget-for-icon-selection)

The extension contains a custom backend widget to make the icon selection easy and intuitive.
To use the widget, use the following code as reference.

Example dca file, e. g. tl\_content

```