Normalize path of icon URL (#932)

In case we render a SVG passing a iconURL or by the theme-settings json
file, we need to normalize the path to add any possible baseUrl to it.

Author: marinaaisa

src/components/SVGIcon.vue

@@ -15,13 +15,19 @@
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
   >
-    <use v-if="themeOverrideURL" :href="`${themeOverrideURL}#${themeId}`" width="100%" height="100%" />
+    <use
+      v-if="themeOverrideURL"
+      :href="normalizePath(`${themeOverrideURL}#${themeId}`)"
+      width="100%"
+      height="100%"
+    />
     <slot v-else />
   </svg>
 </template>
 
 <script>
 import { getSetting } from 'docc-render/utils/theme-settings';
+import { normalizePath } from 'docc-render/utils/assets';
 
 export default {
   name: 'SVGIcon',
@@ -35,6 +41,9 @@ export default {
       default: null,
     },
   },
+  methods: {
+    normalizePath,
+  },
   computed: {
     themeOverrideURL: ({ iconUrl, themeId }) => iconUrl || getSetting([
       'theme',

tests/unit/components/SVGIcon.spec.js

@@ -16,6 +16,12 @@ jest.mock('docc-render/utils/theme-settings');
 
 getSetting.mockReturnValue(undefined);
 
+const mockBaseUrl = '/developer/';
+
+jest.mock('docc-render/utils/assets', () => ({
+  normalizePath: jest.fn(name => mockBaseUrl + name),
+}));
+
 const createWrapper = attrs => shallowMount(SVGIcon, {
   slots: {
     default: '<path d="M8.33"></path>',
@@ -46,7 +52,7 @@ describe('SVGIcon', () => {
     expect(wrapper.find('use').attributes()).toEqual({
       width: '100%',
       height: '100%',
-      href: 'theme/override/path#foo',
+      href: `${mockBaseUrl}theme/override/path#foo`,
     });
   });
 
@@ -62,7 +68,7 @@ describe('SVGIcon', () => {
     expect(wrapper.find('use').attributes()).toEqual({
       width: '100%',
       height: '100%',
-      href: '/path/to/new/icon.svg#foo',
+      href: `${mockBaseUrl}/path/to/new/icon.svg#foo`,
     });
   });
 });