• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Inline SVG Custom Element in Aurelia

Aurelia 1 · September 7, 2016

A unique scenario popped up recently during a project I am building with Aurelia. I needed to cleanly be able to insert SVG images from a folder in my app and display them inline. Duplicating the SVG’s and inlining them was an option, or creating a custom element seemed like a better choice.

What I ended up coming with is the rather simple, but elaborate looking custom element which essentially replaces itself with the contents of an SVG.

To use it, all you need to do is import the inline-svg class and then in your HTML view: <inline-svg svg="icons/heart.svg"></inline-svg> you might want to change the path in the above example if you’re not always loading SVG’s from an images folder.

If you are not using TypeScript (like the above example) you will want to change it to be conventional Javascript instead of copying and pasting the above as is.

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Wendee
Wendee
5 years ago

Interesting. So, if you had an icon that was used several times on a page, let’s say a heart or thumbs up to react to a post or something, the SVG would be added for each instance, correct? In this case, using something like “SVG Store” to combine and create symbols may be the better way to go.

0

Primary Sidebar

Popular

  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How to Fast Launch Microsoft Flight Simulator 2020 (decrease game loading time)
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • A review of the Neural DSP Quad Cortex: is this the future of amp-modelling?
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How To Mock uuid In Jest
  • Convert A Firebase Database Snapshot/Collection To An Array In Javascript

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz