Fix AntDesign integration in icon directory

oblador · Oct 2, 2018 · e5766ad · e5766ad
1 parent e8d4a9f
commit e5766ad
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/directory/src/App.css b/directory/src/App.css
@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'AntDesign';
+  src: url('../../Fonts/AntDesign.ttf') format('truetype');
+}
+
 @font-face {
   font-family: 'Entypo';
   src: url('../../Fonts/Entypo.ttf') format('truetype');
@@ -68,7 +73,7 @@
 }
 
 .Header-Container {
-  background-color: #23527C;
+  background-color: #23527c;
   padding: 10px 10px 10px 10px;
   width: 100%;
 }
@@ -88,7 +93,7 @@
 }
 
 .Search-Container {
-  background-color: #3E3E3E;
+  background-color: #3e3e3e;
   padding: 10px 10px 10px 10px;
   width: 100%;
 }
@@ -102,7 +107,6 @@
 }
 
 .Search-Icon-Container {
-
 }
 
 .Search-Icon {
@@ -144,7 +148,7 @@
   width: 100px;
   display: inline-block;
   text-align: center;
-  background-color: rgba(0,0,0,0.02);
+  background-color: rgba(0, 0, 0, 0.02);
   border-radius: 3px;
   padding: 20px;
   margin-right: 10px;

diff --git a/directory/src/App.js b/directory/src/App.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import './App.css';
 
-import AntD from '../../glyphmaps/AntD.json';
+import AntDesign from '../../glyphmaps/AntDesign.json';
 import Entypo from '../../glyphmaps/Entypo.json';
 import EvilIcons from '../../glyphmaps/EvilIcons.json';
 import Feather from '../../glyphmaps/Feather.json';
@@ -20,7 +20,7 @@ import SimpleLineIcons from '../../glyphmaps/SimpleLineIcons.json';
 import Zocial from '../../glyphmaps/Zocial.json';
 
 const IconFamilies = {
-  AntD,
+  AntDesign,
   Entypo,
   EvilIcons,
   Feather,
@@ -53,13 +53,11 @@ class Icon extends PureComponent {
   }
 }
 
-const HeaderBar = (props) => {
+const HeaderBar = props => {
   return (
     <div className="Header-Container">
       <div className="Header-Content">
-        <h1 className="Header-Title">
-          react-native-vector-icons directory
-        </h1>
+        <h1 className="Header-Title">react-native-vector-icons directory</h1>
       </div>
     </div>
   );
@@ -69,15 +67,15 @@ class SearchBar extends PureComponent {
   timer = null;
 
   state = {
-    keyword: ''
+    keyword: '',
   };
 
-  handleSubmit = (e) => {
+  handleSubmit = e => {
     e.preventDefault();
     this.props.onSubmit(this.inputRef.value);
   };
 
-  handleChange = (e) => {
+  handleChange = e => {
     e.preventDefault();
     clearInterval(this.timer);
 
@@ -96,7 +94,7 @@ class SearchBar extends PureComponent {
           <form onSubmit={this.handleSubmit}>
             <Icon family="FontAwesome" name="search" className="Search-Icon" />
             <input
-              ref={ref => this.inputRef = ref}
+              ref={ref => (this.inputRef = ref)}
               onChange={this.handleChange}
               placeholder="Search for an icon"
               type="text"
@@ -121,9 +119,9 @@ class App extends PureComponent {
     this.handleSubmit('');
   }
 
-  handleSubmit = (text) => {
+  handleSubmit = text => {
     let matches = [];
-    Object.keys(IconFamilies).forEach((family) => {
+    Object.keys(IconFamilies).forEach(family => {
       const icons = IconFamilies[family];
       const names = Object.keys(icons);
       const results = names.filter(name => name.indexOf(text) >= 0);
@@ -139,13 +137,17 @@ class App extends PureComponent {
     return (
       <div>
         {Object.keys(IconFamilies[familyName]).map(iconName => (
-          <Icon key={iconName + familyName} family={familyName} name={iconName} />
+          <Icon
+            key={iconName + familyName}
+            family={familyName}
+            name={iconName}
+          />
         ))}
       </div>
     );
   }
 
-  renderMatch = (match) => {
+  renderMatch = match => {
     const { family, names } = match;
     return (
       <div className="Result-Row" key={family}>
@@ -168,19 +170,13 @@ class App extends PureComponent {
 
     return (
       <div className="Result-Icon-Container" key={name}>
-        <Icon
-          family={familyName}
-          name={name}
-          className="Result-Icon"
-        />
-        <h4 className="Result-Icon-Name">
-          {name}
-        </h4>
+        <Icon family={familyName} name={name} className="Result-Icon" />
+        <h4 className="Result-Icon-Name">{name}</h4>
       </div>
     );
   }
 
-  renderNotFound () {
+  renderNotFound() {
     return (
       <div className="Result-Row">
         <h2 className="Result-Title">Icon not found.</h2>