Add size helper attribute

addon/utils/make-svg.js

@@ -15,7 +15,7 @@ export function symbolUseFor(assetId, svgAttrs) {
  return `<svg ${formatAttrs(svgAttrs)}><use xlink:href="${assetId}" /></svg>`;
 }
 
-export function inlineSvgFor(assetId, svgAttrs, inlineStore) {
+export function inlineSvgFor(assetId, svgAttrs, inlineStore, sizeFactor) {
  let svg = inlineStore[assetId];
 
  if (!svg) {
@@ -24,12 +24,26 @@ export function inlineSvgFor(assetId, svgAttrs, inlineStore) {
  }
 
  let attrs = svg.attrs ? merge(copy(svg.attrs), svgAttrs) : svgAttrs;
+
+ if (sizeFactor) {
+ attrs.width = parseFloat(attrs.width) * sizeFactor || attrs.width;
+ attrs.height = parseFloat(attrs.height) * sizeFactor || attrs.height;
+ }
+
  return `<svg ${formatAttrs(attrs)}>${svg.content}</svg>`;
 }
 
 export default function makeSvg(assetId, svgAttrs, inlineStore = {}) {
  let isSymbol = assetId.lastIndexOf('#', 0) === 0;
+ let sizeFactor;
+
+ if (svgAttrs.size) {
+ sizeFactor = svgAttrs.size;
+ // eslint-disable-next-line no-param-reassign
+ delete svgAttrs.size;
+ }
+
  return isSymbol
  ? symbolUseFor(assetId, svgAttrs)
- : inlineSvgFor(assetId, svgAttrs, inlineStore);
+ : inlineSvgFor(assetId, svgAttrs, inlineStore, sizeFactor);
 }

src/validate-assets.js

@@ -12,7 +12,7 @@ function checkForDuplicates(assets) {
  return;
  }
 
- let invalidAssets = _.flatMap(duplicateIds, ((id) => _.filter(assets, { id })));
+ let invalidAssets = _.flatMap(duplicateIds, (id) => _.filter(assets, { id }));
  return ['Duplicate IDs found:']
  .concat(invalidAssets.map((asset) => `ID: "${asset.id}" Path: ${asset.relativePath}`))
  .join('\n');

tests/acceptance/svg-jar-test-test.js

@@ -37,6 +37,18 @@ test('embeds SVGs with inline strategy', function(assert) {
  'can rewrite viewBox attribute');
  assert.equal(customSVG.getAttribute('width'), null,
  'can remove original width attribute');
+
+ let doubleSizeSVG = find('.double-custom-size-wrap svg')[0];
+ assert.equal(doubleSizeSVG.getAttribute('width'), '20',
+ 'can double custom width via size attribute');
+ assert.equal(doubleSizeSVG.getAttribute('height'), '26',
+ 'can double original height via size attribute');
+
+ let tripleSizeSVG = find('.triple-original-size-wrap svg')[0];
+ assert.equal(tripleSizeSVG.getAttribute('width'), '39',
+ 'can triple original width via size attribute');
+ assert.equal(tripleSizeSVG.getAttribute('height'), '39',
+ 'can triple original height via size attribute');
  });
 });
 

tests/dummy/app/templates/inline-strategy.hbs

@@ -30,3 +30,11 @@
 <div class="rewritten-attrs-wrap">
  {{svg-jar "attrs-test" }}
 </div>
+
+<div class="double-custom-size-wrap">
+ {{svg-jar "attrs-test" width="10px" size=2}}
+</div>
+
+<div class="triple-original-size-wrap">
+ {{svg-jar "attrs-test" size=3}}
+</div>

tests/unit/utils/make-svg-test.js

@@ -41,11 +41,11 @@ test('inlineSvgFor with original attrs', function(assert) {
 });
 
 test('inlineSvgFor with custom attrs', function(assert) {
- let customAttrs = { class: 'custom' };
  let originalStore = {
  icon: { content: 'icon', attrs: { class: 'original' } }
  };
 
+ let customAttrs = { class: 'custom' };
  let passedStore = copy(originalStore, true);
  assert.equal(
  inlineSvgFor('icon', customAttrs, passedStore),
@@ -58,6 +58,37 @@ test('inlineSvgFor with custom attrs', function(assert) {
  );
 });
 
+test('inlineSvgFor sizeFactor', function(assert) {
+ let sizeFactor;
+ let customAttrs;
+ let assetStore = {
+ icon: { content: 'icon', attrs: { width: '5px', height: '10px' } }
+ };
+
+ customAttrs = {};
+ assert.equal(
+ inlineSvgFor('icon', {}, assetStore),
+ '<svg width="5px" height="10px">icon</svg>',
+ "doesn't change height and width if sizeFactor is undefined"
+ );
+
+ sizeFactor = 2;
+ customAttrs = {};
+ assert.equal(
+ inlineSvgFor('icon', customAttrs, assetStore, sizeFactor),
+ '<svg width="10" height="20">icon</svg>',
+ 'can double original height and width'
+ );
+
+ sizeFactor = 3;
+ customAttrs = { height: '1px' };
+ assert.equal(
+ inlineSvgFor('icon', customAttrs, assetStore, sizeFactor),
+ '<svg width="15" height="3">icon</svg>',
+ 'can triple original width and custom height'
+ );
+});
+
 test('formatAttrs works', function(assert) {
  let result = formatAttrs({
  attrName: 'attrValue',