move icons and iconbuttons to elements

src/views/elements.js

-const m = require('mithril');
+import m from 'mithril';
+import { IconButton } from 'polythene-mithril';
 
 export class inputGroup {
   constructor(vnode) {
@@ -51,3 +52,30 @@ export class submitButton {
     return m('div.btn', argsCopy, text);
   }
 }
+
+export const icons = {
+  iconSearchSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>',
+  iconBackSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>',
+  iconClearSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+};
+
+export const BackButton = {
+  view: ({ attrs }) => m(IconButton, {
+    icon: { svg: m.trust(icons.iconBackSVG) },
+    ink: false,
+    events: { onclick: attrs.leave },
+  }),
+};
+export const ClearButton = {
+  view: ({ attrs }) => m(IconButton, {
+    icon: { svg: m.trust(icons.iconClearSVG) },
+    ink: false,
+    events: { onclick: attrs.clear },
+  }),
+};
+export const SearchIcon = {
+  view: () => m(IconButton, {
+    icon: { svg: m.trust(icons.iconSearchSVG) },
+    inactive: true,
+  }),
+};

src/views/selectList.js

@@ -6,33 +6,9 @@ import {
 } from 'polythene-mithril';
 import infinite from 'mithril-infinite';
 import { debounce } from '../utils';
-
-const iconSearchSVG = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>";
-const iconBackSVG = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"/></svg>";
-const iconClearSVG = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
+import { icons, BackButton, ClearButton, SearchIcon } from './elements';
 
 const createSearchField = () => {
-  const BackButton = {
-    view: ({ attrs }) => m(IconButton, {
-      icon: { svg: m.trust(iconBackSVG) },
-      ink: false,
-      events: { onclick: attrs.leave },
-    }),
-  };
-  const ClearButton = {
-    view: ({ attrs }) => m(IconButton, {
-      icon: { svg: m.trust(iconClearSVG) },
-      ink: false,
-      events: { onclick: attrs.clear },
-    }),
-  };
-  const SearchIcon = {
-    view: () => m(IconButton, {
-      icon: { svg: m.trust(iconSearchSVG) },
-      inactive: true,
-    }),
-  };
-
   return {
     oninit: vnode => {
       const value = Stream("");
@@ -123,7 +99,7 @@ export default class SelectList {
     return m('div', [
       this.selected ? m(Toolbar, { compact: true }, [
         m(IconButton, {
-          icon: { svg: m.trust(iconClearSVG) },
+          icon: { svg: m.trust(icons.iconClearSVG) },
           ink: false,
           events: { onclick: () => { this.selected = null; } },
         }),