PHPackages sb2-media/svg-icon-system - 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. [Image & Media](/categories/media) 4. / 5. sb2-media/svg-icon-system ActiveWordpress-plugin[Image & Media](/categories/media) sb2-media/svg-icon-system ========================= A system for inlining accesible SVG icons in WordPress themes v1.1.0(7y ago)118GPL-2.0+PHPPHP >=5.3.0 Since Aug 11Pushed 7y ago1 watchersCompare [ Source](https://github.com/sbarry50/svg-icon-system)[ Packagist](https://packagist.org/packages/sb2-media/svg-icon-system)[ Docs](https://github.com/sbarry50/svg-icon-system)[ RSS](/packages/sb2-media-svg-icon-system/feed)WikiDiscussions master Synced yesterday READMEChangelog (2)Dependencies (3)Versions (3)Used By (0) SVG Icon System =============== [](#svg-icon-system) A system for inlining accessible SVG icons in WordPress themes. Features -------- [](#features) - Render SVG icons inline using a simple function call in your WordPress templates. - SVG icons are deconstructed and rebuilt in adherence to accessibility standards and guidelines. - A single config file is used to configure all SVG icons. - Choose whether to store SVG files in theme or plugin. Requirements ------------ [](#requirements) - [WordPress](https://wordpress.org/) >= 4.7 - [PHP](http://php.net/manual/en/install.php) >= 5.3 - [Composer](https://getcomposer.org/download/) - [Node.js](http://nodejs.org/) >= 6.9.x Installation ------------ [](#installation) 1. From the command line navigate to your WordPress `plugins` directory. 2. Run this command: `composer create-project sb2-media/svg-icon-system`. 3. Change into the SVG Icon System directory: `cd svg-icon-system`. 4. Run `npm install`. 5. Run `npm run dev`. 6. Run `composer dump-autoload -o`. 7. In the WordPress dashboard, navigate to the *Plugins* page and locate the menu item that reads “SVG Icon System.” 8. Click on *Activate.* Usage ----- [](#usage) ### Icon Folder Storage [](#icon-folder-storage) You may choose to store your SVG icon files in this plugin or anywhere in your theme. The plugin will strip the files of all ``, `` and `` tags and reconstruct them in adherence to accessibility standards and guidelines. #### Plugin [](#plugin) By default SVG icons are stored in the `assets/icons` folder in this plugin and then copied over to `dist/icons` when the Laravel Mix build process is run. Store your SVG icons in the `assets/icons` and run the command `npm run dev` or `npm run production` in the plugin's root folder if you wish to utilize the default behavior. `npm run dev` or `npm run production` must be run after adding new SVG icon files to storage. The `assets/icons` directory contains a SVG icon file for demonstration purposes. - `icon_menu.svg` #### Theme [](#theme) If you wish to store your SVG icon files in your theme, simply change the value of the `icon_folder_path` in `config/svg-icons.php` to the path where the files will be stored. A few examples are given in the comments. ### Config [](#config) A single config file `config/svg-icons.php` is used to declare and configure the SVG icons. The configuration follows this convention: ``` $icon_id => [ 'filename' => $value, // Required, MUST match the file name of the SVG icon 'title' => $value, // Optional but highly recommended for standalone, meaningful icons 'description' => $value, // Optional but recommended for standalone, meaningful icons 'viewbox_x' => $value, // Optional, will default to '0' if left blank 'viewbox_y' => $value, // Optional, will default to '0' if left blank 'viewbox_width' => $value, // Recommended, width must be set if left blank 'viewbox_height' => $value, // Recommended, height must be set if left blank 'width' => $value, // Optional, viewbox_width must be set if left blank 'height' => $value, // Optional, viewbox_height must be set if left blank 'preserve_aspect_ratio' => $value, // Optional 'class' => $value, // Optional, custom classes to add 'style' => $value, // Optional ], ``` #### Notes [](#notes) - The `filename` MUST match the name of the SVG icon file. - Standalone, meaningful icons should have a title and possibly a description set in their configuration. If a title (and description) is declared, the plugin will render the SVG icon with the `aria-labelledby=` attribute with a unique ID to link the title (and description) to their respective `` (and ``) elements. - Purely decorative icons do not need a title and description. Leave them blank in the config and the `aria-hidden="true"` attribute will be added to the `` element instead. - Either `width` and `height` or `viewbox_width` and `viewbox_height` attributes MUST be set in the config. If only a `width` and `height` are declared, `viewbox_width` and `viewbox_height` will inherit their values. If only `viewbox_width` and `viewbox_height` values are set, `width` and `height` attributes will not be added to the `` element. - The `preservedAspectRatio` and `style` attributes are optional. #### Examples [](#examples) File `icon_menu.svg` ``` ``` Config with the bare minimum set: ``` 'menu' => [ 'filename' => 'icon_menu', 'title' => '', 'desc' => '', 'viewbox_x' => '', 'viewbox_y' => '', 'viewbox_width' => '20', 'viewbox_height' => '16', 'width' => '', 'height' => '', 'preserve_aspect_ratio' => '', 'class' => '', 'style' => '', ], ``` Output: ``` ``` Config with all attributes set: ``` 'menu' => [ 'filename' => 'icon_menu', 'title' => 'Menu icon', 'desc' => 'Three equal width horizontal bars stacked on top of one another to symbolize a menu', 'viewbox_x' => '0', 'viewbox_y' => '0', 'viewbox_width' => '20', 'viewbox_height' => '16', 'width' => '20', 'height' => '16', 'preserve_aspect_ratio' => 'xMinYMin', 'class' => 'custom-class', 'style' => 'color: red;', ], ``` Output: ``` Menu icon Three equal width horizontal bars stacked on top of one another to symbolize a menu ``` ### Function [](#function) Icons defined in the config can be placed anywhere in your WordPress templates with the `get_svg_icon( $icon_id )` function call. ``` ``` License ------- [](#license) SVG Icon System is licensed under the GPL v2 or later. > This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. > This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. > You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA A copy of the license is included in the root of the plugin’s directory. The file is named `LICENSE`. Credits ------- [](#credits) Portions of this plugin uses code and concepts adapted from [Carl Alexander](https://carlalexander.ca/) and Tonya Mork's [Fulcrum plugin](https://github.com/hellofromtonya/Fulcrum). ### Health Score 26 — LowBetter than 43% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community7 Small or concentrated contributor base Maturity59 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 ~328 days Total 2 Last Release 2867d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/9eda7317b3b7a29e364324303cbea0817792c757d7c9a419d30ca85d7245de1f?d=identicon)[sbarry50](/maintainers/sbarry50) --- Top Contributors [![sbarry50](https://avatars.githubusercontent.com/u/3768680?v=4)](https://github.com/sbarry50 "sbarry50 (11 commits)") --- Tags pluginwordpress ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/sb2-media-svg-icon-system/health.svg) ``` [![Health](https://phpackages.com/badges/sb2-media-svg-icon-system/health.svg)](https://phpackages.com/packages/sb2-media-svg-icon-system) ``` ### Alternatives [wp-sync-db/wp-sync-db-media-files WP Sync DB Media File Addon for WP Sync DB 535151.4k](/packages/wp-sync-db-wp-sync-db-media-files)[humanmade/gaussholder Fast and lightweight image previews for WordPress 196119.7k](/packages/humanmade-gaussholder)[viper007bond/regenerate-thumbnails Regenerate the thumbnails for one or more of your image uploads. Useful when changing their sizes or your theme. 14012.2k](/packages/viper007bond-regenerate-thumbnails)[mindkomm/timmy Advanced image manipulation for Timber. 17735.6k](/packages/mindkomm-timmy)[wp-media/imagify-plugin Image optimization plugin for WordPress by WP Media. 7960.9k](/packages/wp-media-imagify-plugin)[toinekamps/responsive-pics Responsive Pics is a Wordpress tool for resizing images on the fly. 831.2k](/packages/toinekamps-responsive-pics) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)