Merge branch 'sprite-icon-class' into 'master'

Add ability to pass class name to spriteIcon helper

Closes #39079

See merge request gitlab-org/gitlab-ce!14855

app/assets/javascripts/lib/utils/common_utils.js

@@ -403,7 +403,11 @@ export const setCiStatusFavicon = (pageUrl) => {
   });
 };
 
-export const spriteIcon = icon => `<svg><use xlink:href="${gon.sprite_icons}#${icon}" /></svg>`;
+export const spriteIcon = (icon, className = '') => {
+  const classAttribute = className.length > 0 ? `class="${className}"` : '';
+
+  return `<svg ${classAttribute}><use xlink:href="${gon.sprite_icons}#${icon}" /></svg>`;
+};
 
 export const imagePath = imgUrl => `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
 

spec/javascripts/lib/utils/common_utils_spec.js

@@ -474,7 +474,11 @@ describe('common_utils', () => {
       });
 
       it('should return the svg for a linked icon', () => {
-        expect(gl.utils.spriteIcon('test')).toEqual('<svg><use xlink:href="icons.svg#test" /></svg>');
+        expect(gl.utils.spriteIcon('test')).toEqual('<svg ><use xlink:href="icons.svg#test" /></svg>');
+      });
+
+      it('should set svg className when passed', () => {
+        expect(gl.utils.spriteIcon('test', 'fa fa-test')).toEqual('<svg class="fa fa-test"><use xlink:href="icons.svg#test" /></svg>');
       });
     });
   });