diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2017-10-12 12:43:00 -0500 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2017-10-12 12:43:00 -0500 |
commit | 13b299f4ff06a045269937f9e5fce5991bfca2d8 (patch) | |
tree | dc6ceb5dbf4608fef3b902336beff7fc8259dd79 | |
parent | 05f46b820ee607715a9c23beabd98553d64556e0 (diff) | |
download | gitlab-ce-sprite-icon-class.tar.gz |
Add ability to pass class name to spriteIcon helpersprite-icon-class
-rw-r--r-- | app/assets/javascripts/lib/utils/common_utils.js | 6 | ||||
-rw-r--r-- | spec/javascripts/lib/utils/common_utils_spec.js | 6 |
2 files changed, 10 insertions, 2 deletions
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 9f05cf16967..07899777a1e 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/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}`; diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js index f86f2f260c3..6613b7dee6b 100644 --- a/spec/javascripts/lib/utils/common_utils_spec.js +++ b/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>'); }); }); }); |