Skip to main content

Adding SVG Icon

When it comes to adding imagery to your website, there are two basic image 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 to any size without losing quality.

With responsive design, images often need to be used at a variety of dimensions for different screen sizes. While there are numerous approaches to account for these issues with raster images, there is an even easier solution for vector-based graphics: use SVG.

To add an SVG icon to the field,

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

Docusaurus

  1. Clicking on 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 styling editor.

Docusaurus

  1. You can now change the stroke color and stroke width in the styling editor.

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

Changing Stroke Color#

OnePlugin Fields let you change the stroke colors of the selected SVG icon.

You can do that by clicking on the color palette and after selecting the color, you have to click on the Apply button. This will update the icon preview for you to verify the changes.

You can also set the default colors in the 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#

OnePlugin Fields also lets you increase or decrease the stroke width using the slider control.

Docusaurus

Displaying 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() }}