ember-svg-jar

ember-svg-jar is an Ember addon that helps manage SVG assets efficiently. It includes features like an in-app viewer and support for SVG customization. For React, we're using standard <img> tags to reference SVGs directly. While ember-svg-jar embeds and customizes SVGs inline in Ember templates, the React implementation relies on external references using standard HTML <img> tags.

Ember

With the library, templates can pass in other props. These props are passed directly to the <svg> tag. Furthermore, in Ember, these ids like ice-cream-cone can come from any path.

/components/ice-cream/template.hbs

{{svg-jar "ice-cream-cone"}}
{{svg-jar "ice-cream-cone-sized" height="20px" width="20px"}}

React

In React, we're going to make img tags with alt text on them explicitly. Before, there was no screen reader available info. Now, we will add alt text. If the image is decorative and conveys no meaningful content, use an empty alt attribute (alt="") so screen readers will ignore it. If no height and width provided, please make sure to match the existing look of the svg beforehand.

const IceCreamImages = () => (
	<>
		<img alt="" src="assets/ice-cream/ice-cream-cone.svg"  />
		<img 
			alt="" 
			src="assets/ice-cream/ice-cream-cone-sized.svg" 
			height="20" 
			width="20"
		/>
	</>
)

Further reading

• ember-svg-jar https://svgjar.web.app/
• How to write accessible alt text https://supercooldesign.co.uk/blog/how-to-write-good-alt-text

⚙️ Performance Note

In Ember, ember-svg-jar inlines SVGs, allowing for better styling and interactivity at the cost of larger DOM payloads. If SVGs need to be styled directly, please look at using an icon package like EDS Icons instead if you work at Expel. In React, using <img> tags leverages browser caching and results in smaller markup but sacrifices styling flexibility.