PHPackages                             ideasonpurpose/wp-svg-lib - 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. ideasonpurpose/wp-svg-lib

ActiveLibrary

ideasonpurpose/wp-svg-lib
=========================

Utilities for collecting and reusing inline SVG components

v3.2.0(8mo ago)1123↓100%[4 issues](https://github.com/ideasonpurpose/wp-svg-lib/issues)[3 PRs](https://github.com/ideasonpurpose/wp-svg-lib/pulls)MITPHPCI failing

Since Apr 20Pushed 8mo ago1 watchersCompare

[ Source](https://github.com/ideasonpurpose/wp-svg-lib)[ Packagist](https://packagist.org/packages/ideasonpurpose/wp-svg-lib)[ RSS](/packages/ideasonpurpose-wp-svg-lib/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (5)Dependencies (5)Versions (16)Used By (0)

wp-svg-lib
==========

[](#wp-svg-lib)

#### Version 3.2.0

[](#version-320)

A powerful utility library for including SVG files in WordPress sites.

[![Packagist](https://camo.githubusercontent.com/d997a027b0f880131a1ffdd2bdf676f05a59ea83fcc24dfc082d1d558e4c5838/68747470733a2f2f62616467656e2e6e65742f7061636b61676973742f762f69646561736f6e707572706f73652f77702d7376672d6c6962)](https://packagist.org/packages/ideasonpurpose/wp-svg-lib)[![codecov](https://camo.githubusercontent.com/a6d20a1eb4c27b49ad5728d25bf40d35df51f7977a02147055c3a5cc4b76d49e/68747470733a2f2f636f6465636f762e696f2f67682f69646561736f6e707572706f73652f77702d7376672d6c69622f6272616e63682f6d61737465722f67726170682f62616467652e737667)](https://codecov.io/gh/ideasonpurpose/wp-svg-lib)[![Coverage Status](https://camo.githubusercontent.com/3e2d4e5743338a96068e263cbed092a546ba4bc6cb4ec7fea7e7e8d9c5eabf47/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f69646561736f6e707572706f73652f77702d7376672d6c69622f62616467652e737667)](https://coveralls.io/github/ideasonpurpose/wp-svg-lib)[![Maintainability](https://camo.githubusercontent.com/0d185dbab19361262f7a66a5521975dd3d2666aee6b60ac4e8286f2b1e5ea4da/68747470733a2f2f6170692e636f6465636c696d6174652e636f6d2f76312f6261646765732f63353832383937313733346365636431356364302f6d61696e7461696e6162696c697479)](https://codeclimate.com/github/ideasonpurpose/wp-svg-lib/maintainability)[![styled with prettier](https://camo.githubusercontent.com/7c31269a4fab27bd4b327813e7a459cf7a76da0b0b009254bf949a20889d2b6c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7374796c65645f776974682d70726574746965722d6666363962342e737667)](https://github.com/prettier/prettier)

What it does
------------

[](#what-it-does)

This helper library reads SVG files from a directory then provides helper functions for embedding the files into WordPress templates. Files can be embedded inline or converted to symbols to help conserve bandwidth.

The library also enables SVG shortcodes, which can directly place SVGs into the block editor.

***Note:** Version 2.0.0 changed the namespace from `IdeasOnPurpose\SVG` to `IdeasOnPurpose\WP\SVG`.*

Instructions
------------

[](#instructions)

Initialize the library from a theme's **functions.php** file. Starting with version 3, the library looks for SVG files in the theme's `dist/images/svg` directory by default, so instantiation can look like this:

```
new IdeasOnPurpose\WP\SVG;

// or use a custom path
new IdeasOnPurpose\WP\SVG(get_theme_directory() . '/icons/svg');
```

All SVG files below the directory will be registered and available to template files. The library will inject an `$SVG` query var so SVGs can be accessed from inside [`get_template_part()`](https://developer.wordpress.org/reference/functions/get_template_part/) includes with no additional code.

Install from [Packagist](https://packagist.org/packages/ideasonpurpose/wp-svg-lib), require it in **composer.json** or tell Composer to load the package:

```
$ composer require ideasonpurpose/wp-svg-lib
```

### Embedding SVGs

[](#embedding-svgs)

Embedding images is the same as pasting the SVG files into the HTML source. Most registered SVG files can be inserted using just their name, so a file named **logo.svg** can embedded like this:

```

```

That code outputs something like this:

```
...
```

The library normalizes all file names to *camelCase* to help with embedding. Directory separators will be replaced with double-underscores. Some examples:

```
// the file 'icons/email-circle.svg' can be embedded as:
$SVG->icons__emailCircle;
```

For SVG files whose names aren't compatible with PHP's property syntax, there's also an embed command which also works with nested directories:

```