SVG class in Iconify JSON Tools

This article is for deprecated Iconify JSON Tools.

Iconify JSON Tools has been replced with Iconify Utils

Iconify JSON Tools is a lightweight library for working with icon sets in Iconify JSON format. See Iconify JSON Tools documentation.

SVG class represents an icon.

To include it use this code:

Node.js
const { SVG } = require('@iconify/json-tools');
PHP
use \Iconify\JSONTools\SVG;

Initializing

To create new SVG instance, you need to provide full icon data.

Loading from collection

This example creates SVG instance with data retrieved from a collection:

Node.js
// Import Collection and SVG classes
const { SVG, Collection } = require('@iconify/json-tools');

// Create Collection instance and load Material Design Icons
let collection = new Collection();
collection.loadIconifyCollection('mdi');

// Create SVG instance with 'mdi:home' icon data
let svg = new SVG(collection.getIconData('home'));

// Generate and echo <svg>
console.log(svg.getSVG({}));
PHP
<?php

// Import Collection and SVG classes
use \Iconify\JSONTools\Collection;
use \Iconify\JSONTools\SVG;

// Create Collection instance and load Material Design Icons
$collection = new Collection();
$collection->loadIconifyCollection('mdi');

// Create SVG instance with 'mdi:home' icon data
$svg = new SVG($collection->getIconData('home'));

// Generate and echo <svg>
echo $svg->getSVG();

Getting <svg>

The SVG class has one function: getSVG(). It returns <svg> string.

Function getSVG() has one parameter: custom properties array. Possible array properties:

  • inline, boolean or string. If true or "true" or "1", function will add vertical-align to style, making it behave like a glyph. See inline vs block article (TODO).
  • width and height are dimensions of icon. If only one dimension is set, another dimension will be set using icon's width/height ratio. Value can be string (such as "1em", "24px" or a number). If value is "auto", icon's original dimensions will be used. If both width and height are not set, height defaults to "1em".
  • hFlip and vFlip. If true or "true" or "1" (string or boolean), icon will be flipped horizontally and/or vertically.
  • flip, string is an alternative to hFlip and vFlip. Value can be "horizontal", "vertical" or "horizontal,vertical".
  • rotate is for rotating icon. Value can be in degrees "90deg" (only 90, 180 and 270 degrees rotations are available), percentages "25%" (25%, 50% and 75% are aliases of "90deg", "180deg" and "270deg") or number 1-3 (1 = "90deg", 2 = "180deg", 3 = "270deg").
  • align is for icon alignment. This is useful if you have custom width and height set. Unlike other images, SVG keep aspect ratio (unless stated otherwise) when scaled. Value is comma or space separated string with possible strings (example: "left,top,crop"):
    • "left", "right", "center" are for horizontal alignment.
    • "top", "middle", "bottom" are for vertical alignment.
    • "crop" crop parts that go outside of boundaries.
    • "meet" scale icon down to fit entire icon (opposite of "crop").
  • color sets custom color string to replace "currentColor", string. This is useful when using icon as background image because background image cannot use "currentColor".
  • box adds a bounding box. If true or "true" or "1" (string or boolean), icon will include extra rectangle matching its viewBox. This is useful to export icon to editor making icon easier to scale or place into its position in sketch because often editors ignore viewBox.

All properties, except for box are similar to attributes used for icons in Iconify SVG Framework and various Iconify components and behave exactly the same way.

Node.js
svg.getSVG({
   height: '24px',
});
svg.getSVG({
   height: '24px',
   width: '24px',
   align: 'center,middle,meet',
   color: '#ff8000',
   rotate: '90deg', // same as "rotate: 1" or "rotate: '25%'"
   flip: 'horizontal', // same as "hFlip: true"
   box: true,
});
svg.getSVG({
   height: 'auto', // height and width will be set from viewBox attribute, using original icon's dimensions
});
PHP
$svg->getSVG([
   'height' => '24px'
]);
$svg->getSVG([
   'height' => '24px',
   'width' => '24px',
   'align' => 'center,middle,meet',
   'color' => '#ff8000',
   'rotate' => '90deg', // same as "'rotate' =>  1" or "'rotate' => '25%'"
   'flip' => 'horizontal', // same as "'hFlip' => true"
   'box' => true
]);
$svg->getSVG([
   'height' => 'auto' // height and width will be set from viewBox attribute, using original icon's dimensions
]);