add svg files to inputSupport

Author: sosukesuzuki

app/views/note/inputSupport/NoteInputSupport.js

@@ -7,6 +7,18 @@ import {
 } from 'react-native'
 import Styles from './NoteInputSupportStyles'
 
+import SvgUri from 'react-native-svg-uri'
+
+import headIcon from '../../../resource/noteInputSupportIcons/icon-head.svg'
+import listIcon from '../../../resource/noteInputSupportIcons/icon-list.svg'
+import codeIcon from '../../../resource/noteInputSupportIcons/icon-code.svg'
+import boldIcon from '../../../resource/noteInputSupportIcons/icon-bold.svg'
+import italicIcon from '../../../resource/noteInputSupportIcons/icon-italic.svg'
+import quoteIcon from '../../../resource/noteInputSupportIcons/icon-quote.svg'
+import checkboxIcon from '../../../resource/noteInputSupportIcons/icon-checkbox.svg'
+import pasteIcon from '../../../resource/noteInputSupportIcons/icon-paste.svg'
+
+
 export default class NoteInputSupport extends React.Component {
   render() {
     return (
@@ -18,7 +30,11 @@ export default class NoteInputSupport extends React.Component {
             }}
             style={Styles.inputElementsStyle}>
             <View>
-              <Text style={Styles.supportMain}>#</Text>
+              <SvgUri
+                  width='10'
+                  height='10'
+                  source={headIcon}
+              />
               <Text style={Styles.supportSub}>Head</Text>
             </View>
           </TouchableHighlight>
@@ -28,7 +44,11 @@ export default class NoteInputSupport extends React.Component {
             }}
             style={Styles.inputElementsStyle}>
             <View>
-              <Text style={Styles.supportMain}>-</Text>
+              <SvgUri
+                  width='10'
+                  height='10'
+                  source={listIcon}
+              />
               <Text style={Styles.supportSub}>List</Text>
             </View>
           </TouchableHighlight>
@@ -38,7 +58,11 @@ export default class NoteInputSupport extends React.Component {
             }}
             style={Styles.inputElementsStyle}>
             <View>
-              <Text style={Styles.supportMain}>```</Text>
+              <SvgUri
+                  width='10'
+                  height='10'
+                  source={codeIcon}
+              />
               <Text style={Styles.supportSub}>Code</Text>
             </View>
           </TouchableHighlight>
@@ -48,7 +72,11 @@ export default class NoteInputSupport extends React.Component {
             }}
             style={Styles.inputElementsStyle}>
             <View>
-              <Text style={Styles.supportMain}>**</Text>
+              <SvgUri
+                  width='10'
+                  height='10'
+                  source={boldIcon}
+              />
               <Text style={Styles.supportSub}>Bold</Text>
             </View>
           </TouchableHighlight>
@@ -58,7 +86,11 @@ export default class NoteInputSupport extends React.Component {
             }}
             style={Styles.inputElementsStyle}>
             <View>
-              <Text style={Styles.supportMain}>_</Text>
+              <SvgUri
+                  width='10'
+                  height='10'
+                  source={italicIcon}
+              />
               <Text style={Styles.supportSub}>italic</Text>
             </View>
           </TouchableHighlight>
@@ -68,7 +100,11 @@ export default class NoteInputSupport extends React.Component {
             }}
             style={Styles.inputElementsStyle}>
             <View>
-              <Text style={Styles.supportMain}>&gt;</Text>
+              <SvgUri
+                  width='10'
+                  height='10'
+                  source={quoteIcon}
+              />
               <Text style={Styles.supportSub}>Quote</Text>
             </View>
           </TouchableHighlight>
@@ -78,14 +114,25 @@ export default class NoteInputSupport extends React.Component {
             }}
             style={Styles.inputElementsStyle}>
             <View>
-              <Text style={Styles.supportMain}>- [ ]</Text>
+              <SvgUri
+                  width='10'
+                  height='10'
+                  source={checkboxIcon}
+              />
               <Text style={Styles.supportSub}>TaskList</Text>
             </View>
           </TouchableHighlight>
           <TouchableHighlight
             onPress={this.props.pasteContent.bind(this)}
             style={Styles.inputElementsStyle}>
-            <Text style={Styles.pasteButton}>Paste</Text>
+            <View>
+              <SvgUri
+                  width='10'
+                  height='10'
+                  source={pasteIcon}
+              />
+              <Text style={Styles.supportSub}>Paste</Text>
+            </View>
           </TouchableHighlight>
         </ScrollView>
       </View>