PHPackages                             innoweb/silverstripe-svg-sprite-icon-field - 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. innoweb/silverstripe-svg-sprite-icon-field

ActiveSilverstripe-vendormodule

innoweb/silverstripe-svg-sprite-icon-field
==========================================

Adds an icon selector field to Silverstripe that uses an SVG sprite.

1.0.1(12mo ago)07BSD-3-ClausePHP

Since Apr 30Pushed 12mo ago1 watchersCompare

[ Source](https://github.com/xini/silverstripe-svg-sprite-icon-field)[ Packagist](https://packagist.org/packages/innoweb/silverstripe-svg-sprite-icon-field)[ RSS](/packages/innoweb-silverstripe-svg-sprite-icon-field/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (2)Versions (3)Used By (0)

SVG Sprite Icon Field
=====================

[](#svg-sprite-icon-field)

[![Version](https://camo.githubusercontent.com/f49e390360ee3cd04936564d5ec6304f2bef4531b804f1cd56b5fb72d3826e8e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f696e6e6f7765622f73696c7665727374726970652d7376672d7370726974652d69636f6e2d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/innoweb/silverstripe-svg-sprite-icon-field)[![License](https://camo.githubusercontent.com/90b5d868bc0bc96e2ebee3af900dff3841fd7140901adc87df9a47e0e096f006/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f696e6e6f7765622f73696c7665727374726970652d7376672d7370726974652d69636f6e2d6669656c642e7376673f7374796c653d666c61742d737175617265)](license.md)

Introduction
------------

[](#introduction)

This module adds an icon selector field to Silverstripe that uses an SVG sprite.

The module is based on [jaedb/iconfield](https://github.com/jaedb/IconField), but it uses an SVG sprite instead of individual images.

By default, the free version of the FontAwesome regular icons are used.

[![IconField](docs/screenshot.png)](docs/screenshot.png)

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

[](#requirements)

- Silverstripe ^5
- PHP DOM extension (ext-dom)

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

[](#installation)

Install the module using composer:

```
composer require innoweb/silverstripe-svg-sprite-icon-field

```

Then run dev/build.

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

[](#configuration)

The module uses the following configuration options:

```
Innoweb\SvgSpriteIconField\Icon:
  icon_sprite: 'public/_icons/sprite.svg' # The path to the SVG sprite.
                                          # Can be a module resource or relative path.
                                          # Default: 'innoweb/silverstripe-svg-sprite-icon-field: client/icons/fontawesome-regular-free.svg'

  icon_width: '20' # The width of the icon used in the frontend.
                   # Default: 16

  icon_height: '20' # The height of the icon used in the frontend.
                    # Default: 16

  css_class: 'YourIconClass' # The CSS class used in the frontend.
                             # Default: 'SpriteIcon'
```

Usage
-----

[](#usage)

Add an icon field to your DataObject:

```
use Innoweb\SvgSpriteIconField\Icon;

...

private static $db = [
    'Icon' => Icon::class,
];
```

Then add the form field to your DataObject:

```
public function getCMSFields()
{
    $fields = parent::getCMSFields();

    ...

    $fields->push(
        IconField::create('Icon', 'Icon')
    );

    ...

    return $fields;
}
```

In your template, you can then use the field like so:

```
$YourObject.Icon
```

I recommend adding the following default CSS to your project:

```
.SpriteIcon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: currentColor;
}
```

You can also change the colour of the icon by using CSS:

```
.SpriteIcon {
    fill: red;
    stroke: red;
}
```

And you can change the size of the icon by using CSS:

```
.SpriteIcon {
    font-size: 3em;
}
```

And of course you can override the template `Innoweb\SvgSpriteIconField\Icon` in your theme if you like.

Changelog
---------

[](#changelog)

See [Changelog](changelog.md)

License
-------

[](#license)

BSD 3-Clause License, see [License](license.md)

Credits
-------

[](#credits)

- [jaedb](https://github.com/jaedb), for writing the [original module](https://github.com/jaedb/IconField)
- [PlasticStudio](https://github.com/PlasticStudio), for their SS5 upgrade and improvements

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance50

Moderate activity, may be stable

Popularity4

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

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

Total

2

Last Release

363d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0d2e71d7787401a7bd4916062346163897f89f455d650ab32b5d60cd14825ad3?d=identicon)[xini](/maintainers/xini)

---

Top Contributors

[![xini](https://avatars.githubusercontent.com/u/1152403?v=4)](https://github.com/xini "xini (5 commits)")

---

Tags

silverstripeiconssvgfieldiconsvg-sprite

### Embed Badge

![Health badge](/badges/innoweb-silverstripe-svg-sprite-icon-field/health.svg)

```
[![Health](https://phpackages.com/badges/innoweb-silverstripe-svg-sprite-icon-field/health.svg)](https://phpackages.com/packages/innoweb-silverstripe-svg-sprite-icon-field)
```

###  Alternatives

[silverstripe/tagfield

Tag field for SilverStripe

571.2M45](/packages/silverstripe-tagfield)[stevie-mayhew/silverstripe-svg

Basic SVG support for SilverStripe

23326.5k4](/packages/stevie-mayhew-silverstripe-svg)[smithfield-studio/acf-svg-icon-picker

Add ACF field for selecting SVG icons.

3710.8k](/packages/smithfield-studio-acf-svg-icon-picker)[fortawesome/wordpress-fontawesome

Official Font Awesome WordPress plugin composer package.

662.1k](/packages/fortawesome-wordpress-fontawesome)[kinglozzer/multiselectfield

A sortable multiple select field for managing many-to-many relations

1341.2k2](/packages/kinglozzer-multiselectfield)

PHPackages © 2026

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