fix(svg): remove xmlns (#4839)

xml namespace is not required for svg elements (and has never been https://stackoverflow.com/a/18468348/3185307), only for svg documents. This saves a probably insignificant amount of bundlesize
algolia · Aug 19, 2021 · 932ae3a · 932ae3a
1 parent 413c2db
commit 932ae3a
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 18 deletions.
diff --git a/src/widgets/rating-menu/rating-menu.tsx b/src/widgets/rating-menu/rating-menu.tsx
@@ -159,7 +159,7 @@ const renderer =
         templateProps={renderState.templateProps!}
         toggleRefinement={refine}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
+        <svg style="display:none;">
           <symbol
             id={suit({ descendantName: 'starSymbol' })}
             viewBox="0 0 24 24"

diff --git a/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.ts.snap b/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.ts.snap
@@ -51,7 +51,7 @@ Object {
   "searchBoxTemplateProps": Object {
     "templates": Object {
       "loadingIndicator": "
-<svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#444\\">
+<svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" stroke=\\"#444\\">
   <g fill=\\"none\\" fillRule=\\"evenodd\\">
     <g transform=\\"translate(1 1)\\" strokeWidth=\\"2\\">
       <circle strokeOpacity=\\".5\\" cx=\\"18\\" cy=\\"18\\" r=\\"18\\" />
@@ -70,12 +70,12 @@ Object {
 </svg>
   ",
       "reset": "
-<svg class=\\"{{cssClasses.resetIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
+<svg class=\\"{{cssClasses.resetIcon}}\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
   <path d=\\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\\"></path>
 </svg>
   ",
       "submit": "
-<svg class=\\"{{cssClasses.submitIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
+<svg class=\\"{{cssClasses.submitIcon}}\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
   <path d=\\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\\"></path>
 </svg>
   ",

diff --git a/src/widgets/search-box/__tests__/__snapshots__/search-box-test.ts.snap b/src/widgets/search-box/__tests__/__snapshots__/search-box-test.ts.snap
@@ -28,7 +28,7 @@ Object {
   "showSubmit": true,
   "templates": Object {
     "loadingIndicator": "
-<svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#444\\">
+<svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" stroke=\\"#444\\">
   <g fill=\\"none\\" fillRule=\\"evenodd\\">
     <g transform=\\"translate(1 1)\\" strokeWidth=\\"2\\">
       <circle strokeOpacity=\\".5\\" cx=\\"18\\" cy=\\"18\\" r=\\"18\\" />
@@ -47,12 +47,12 @@ Object {
 </svg>
   ",
     "reset": "
-<svg class=\\"{{cssClasses.resetIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
+<svg class=\\"{{cssClasses.resetIcon}}\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
   <path d=\\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\\"></path>
 </svg>
   ",
     "submit": "
-<svg class=\\"{{cssClasses.submitIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
+<svg class=\\"{{cssClasses.submitIcon}}\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
   <path d=\\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\\"></path>
 </svg>
   ",
@@ -88,7 +88,7 @@ Object {
   "showSubmit": true,
   "templates": Object {
     "loadingIndicator": "
-<svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#444\\">
+<svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" stroke=\\"#444\\">
   <g fill=\\"none\\" fillRule=\\"evenodd\\">
     <g transform=\\"translate(1 1)\\" strokeWidth=\\"2\\">
       <circle strokeOpacity=\\".5\\" cx=\\"18\\" cy=\\"18\\" r=\\"18\\" />
@@ -107,12 +107,12 @@ Object {
 </svg>
   ",
     "reset": "
-<svg class=\\"{{cssClasses.resetIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
+<svg class=\\"{{cssClasses.resetIcon}}\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
   <path d=\\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\\"></path>
 </svg>
   ",
     "submit": "
-<svg class=\\"{{cssClasses.submitIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
+<svg class=\\"{{cssClasses.submitIcon}}\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
   <path d=\\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\\"></path>
 </svg>
   ",
@@ -148,7 +148,7 @@ Object {
   "showSubmit": true,
   "templates": Object {
     "loadingIndicator": "
-<svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#444\\">
+<svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" stroke=\\"#444\\">
   <g fill=\\"none\\" fillRule=\\"evenodd\\">
     <g transform=\\"translate(1 1)\\" strokeWidth=\\"2\\">
       <circle strokeOpacity=\\".5\\" cx=\\"18\\" cy=\\"18\\" r=\\"18\\" />
@@ -167,12 +167,12 @@ Object {
 </svg>
   ",
     "reset": "
-<svg class=\\"{{cssClasses.resetIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
+<svg class=\\"{{cssClasses.resetIcon}}\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
   <path d=\\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\\"></path>
 </svg>
   ",
     "submit": "
-<svg class=\\"{{cssClasses.submitIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
+<svg class=\\"{{cssClasses.submitIcon}}\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
   <path d=\\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\\"></path>
 </svg>
   ",

diff --git a/src/widgets/search-box/defaultTemplates.ts b/src/widgets/search-box/defaultTemplates.ts
@@ -2,17 +2,17 @@ import type { SearchBoxComponentTemplates } from '../../components/SearchBox/Sea
 
 const defaultTemplate: SearchBoxComponentTemplates = {
   reset: `
-<svg class="{{cssClasses.resetIcon}}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
+<svg class="{{cssClasses.resetIcon}}" viewBox="0 0 20 20" width="10" height="10">
   <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"></path>
 </svg>
   `,
   submit: `
-<svg class="{{cssClasses.submitIcon}}" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
+<svg class="{{cssClasses.submitIcon}}" width="10" height="10" viewBox="0 0 40 40">
   <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path>
 </svg>
   `,
   loadingIndicator: `
-<svg class="{{cssClasses.loadingIcon}}" width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444">
+<svg class="{{cssClasses.loadingIcon}}" width="16" height="16" viewBox="0 0 38 38" stroke="#444">
   <g fill="none" fillRule="evenodd">
     <g transform="translate(1 1)" strokeWidth="2">
       <circle strokeOpacity=".5" cx="18" cy="18" r="18" />

diff --git a/src/widgets/voice-search/defaultTemplates.ts b/src/widgets/voice-search/defaultTemplates.ts
@@ -24,7 +24,6 @@ const getButtonInnerElement = (
 const defaultTemplates: VoiceSearchComponentTemplates = {
   buttonText({ status, errorCode, isListening }) {
     return `<svg
-       xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"

diff --git a/stories/query-rule-custom-data.stories.ts b/stories/query-rule-custom-data.stories.ts
@@ -109,7 +109,7 @@ storiesOf('Metadata/QueryRuleCustomData', module)
               {
                 title: 'Kill Bill',
                 banner:
-                  'http://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
+                  'https://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
                 link: 'https://www.netflix.com/title/60031236',
               },
             ];