add FormInputIcon component

Author: isneezy

example/src/components/FormsPage.vue

@@ -47,6 +47,26 @@
                                         </form-group-addon>
                                     </form-input-group>
                                 </form-group>
+                                <form-group>
+                                    <form-label>Icon input</form-label>
+                                    <form-input-icon icon="search" right class="mb-3">
+                                        <form-input placeholder="Search for..."/>
+                                    </form-input-icon>
+                                    <form-input-icon icon="user" class="mb-3">
+                                        <form-input placeholder="Username"/>
+                                    </form-input-icon>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Separated input</form-label>
+                                    <grid-row class="gutters-xs">
+                                        <grid-col sm>
+                                            <form-input placeholder="Search for..."/>
+                                        </grid-col>
+                                        <grid-col class="col-auto">
+                                            <t-button><icon icon="search"></icon></t-button>
+                                        </grid-col>
+                                    </grid-row>
+                                </form-group>
                             </grid-col>
                             <grid-col md="6" lg="4">
                                 <form-group>

src/components/Form/FormInputIcon.js

@@ -0,0 +1,15 @@
+export default {
+  name: 'form-input-icon',
+  props: {
+    icon: {required: true, type: String},
+    prefix: {default: 'fe', type: String},
+    right: {default: false, type: Boolean}
+  },
+  render (createElement) {
+    const addOn = createElement('span', {class: ['input-icon-addon']}, [createElement('icon', {props: {icon: this.icon, prefix: this.prefix}})])
+    const elements = [addOn, this.$slots.default]
+    return createElement('div', {
+      class: ['input-icon']
+    }, this.right ? elements.reverse() : elements)
+  }
+}

src/components/Form/index.js

@@ -3,6 +3,7 @@ import FormFileInput from './FormFileInput'
 import FormGroup from './FormGroup'
 import FormGroupAddon from './FormGroupAddon'
 import FormInput from './FormInput'
+import FormInputIcon from './FormInputIcon'
 import FormInputGroup from './FormInputGroup'
 import FormInvalidFeedback from './FormInvalidFeedback'
 import FormLabel from './FormLabel'
@@ -14,6 +15,7 @@ import FormTextarea from './FormTextarea'
 export {
   FormCheckbox,
   FormFileInput,
+  FormInputIcon,
   FormGroup,
   FormGroupAddon,
   FormInput,