Rename svg-icon.scss to SvgIcon.scss

Rename "svg-icon" class to "SvgIcon"

frontend-shared/src/components/SvgIcon.js

@@ -68,7 +68,7 @@ export function SvgIcon({ name, className = '', inline = false, title = '' }) {
 
   return (
     <span
-      className={classnames('svg-icon', { 'svg-icon--inline': inline })}
+      className={classnames('SvgIcon', { 'SvgIcon--inline': inline })}
       dangerouslySetInnerHTML={{ __html: markup }}
       ref={element}
       {...spanProps}

frontend-shared/src/components/test/SvgIcon-test.js

@@ -65,16 +65,16 @@ describe('SvgIcon', () => {
     const container = document.createElement('div');
     render(<SvgIcon name="arrow-left" />, container);
     const wrapper = container.querySelector('span');
-    assert.isTrue(wrapper.classList.contains('svg-icon'));
-    assert.isFalse(wrapper.classList.contains('svg-icon--inline'));
+    assert.isTrue(wrapper.classList.contains('SvgIcon'));
+    assert.isFalse(wrapper.classList.contains('SvgIcon--inline'));
   });
 
   it('appends an inline class to wrapper if `inline` prop is `true`', () => {
     const container = document.createElement('div');
     render(<SvgIcon name="arrow-left" inline={true} />, container);
     const wrapper = container.querySelector('span');
-    assert.isTrue(wrapper.classList.contains('svg-icon'));
-    assert.isTrue(wrapper.classList.contains('svg-icon--inline'));
+    assert.isTrue(wrapper.classList.contains('SvgIcon'));
+    assert.isTrue(wrapper.classList.contains('SvgIcon--inline'));
   });
 
   it('sets a title to the containing `span` element if `title` is present', () => {

frontend-shared/styles/_index.scss

@@ -3,4 +3,4 @@
 // e.g.
 // @use '@hypothesis/frontend-shared/styles'
 
-@use './components/svg-icon';
+@use './components/SvgIcon';

frontend-shared/styles/components/svg-icon.scss → frontend-shared/styles/components/SvgIcon.scss

 /* Make the wrapper element's size match the contained `svg` element  */
-.svg-icon {
+.SvgIcon {
   display: flex;
 
   &--inline {

src/styles/mixins/layout.scss

@@ -76,7 +76,7 @@
  * @FIXME Find workaround for SvgIcon exception
  */
 @mixin vertical-rhythm($size: var.$layout-space) {
-  & > * + *:not([class*='svg-icon--inline']) {
+  & > * + *:not([class*='SvgIcon--inline']) {
     margin-top: $size;
   }
 }