Skip to main content

Adding an SVG Icon

Add an SVG#

Adding SVG assets to your your OnePlugin Field.#

Why use SVG Icon's#

When it comes to adding rich static content to your website, there are two basic types to choose from: raster images and vector images.

  • A raster image, typically a photograph, is made up of pixels and has a set resolution. When scaled up, it will lose quality and can appear pixelated or grainy.

  • A vector image is created using points, lines, and shapes. You can scale vector images without impacting image quality.

Websites that responed well, require images to be served at a variety of dimensions and optimal size for the users screen sizes. While there are numerous approaches to account for these issues with raster images, there is an even easier solution for icons, vector-based graphics or SVG.

To add an SVG icon to the field,#

  1. Select Add SVG Icon option from the drop down.

Docusaurus

  1. Clicking on the Add SVG Icon button will open a popup showing all the animated icons sorted by category.

Docusaurus

  1. Select the icon you want to add to the page and this will activate the style editor.

Docusaurus

  1. You can now change the stroke color and stroke width in the styling editor from your default colour selection.

  2. Once you are happy with the changes, select the Done button to add the SVG icon to the field.

Changing Stroke Color#

OnePlugin Media lets you change the stroke color of the selected SVG icon.

By clicking on the color palette and selecting your prefered color. Then clicking on the Apply button. This will update the icon preview for you to verify the changes.

You can also set the default color in Settings page to reflect the color theme of your website. This will save you the hassle of doing this every time you select an icon.

Docusaurus

Changing Stroke Width#

Change the stroke width by increasing or decreasing the stroke width using the slider control.

Docusaurus

Displaying the selected SVG icon#

Displaying the selected SVG icon is very simple.

In your twig file, add

// entries.asset is the Craft CMS field name{{ entries.asset.render() }}

Rendering options#

The render() function accepts parameters which will be passed directly to the rendered output tag.

So for instance, the below code

// entries.asset is the Craft CMS field name{{ entries.asset.render({'class':'row-flex col-sm-3','hello':'world'}) }}

will result in 

<svg src=... class='row-flex col-sm-3' hello='world'>...</svg>

Having said that, there is an exception.

Setting the height and width of the output elements inline is not a commonly preferred approach. But if you have no choice, you can pass the 'width' and 'height' parameters along with an extra attribute called 'size', value of which should be set to 'true'.

// entries.asset is the Craft CMS field name{{ entries.asset.render({'size':true,'width':'100px','height':'100px'}) }}

will result in 

<svg style='width:100px;height:100px;'>...</svg>

Available Twig Method#

type() - Returns string 'svg'.

// entries.asset is the Craft CMS field name{{ entries.asset.type() }}