UNPKG

@expo/vector-icons

Version:

Built-in support for 10 popular icon fonts and the tooling to create your own Icon components from your font and glyph map. This is a wrapper around react-native-vector-icons to make it compatible with Expo.

181 lines (150 loc) 2.83 kB
@font-face { font-family: 'Entypo'; src: url('./fonts/Entypo.ttf') format('truetype'); } @font-face { font-family: 'EvilIcons'; src: url('./fonts/EvilIcons.ttf') format('truetype'); } @font-face { font-family: 'Feather'; src: url('./fonts/Feather.ttf') format('truetype'); } @font-face { font-family: 'FontAwesome'; src: url('./fonts/FontAwesome.ttf') format('truetype'); } @font-face { font-family: 'Foundation'; src: url('./fonts/Foundation.ttf') format('truetype'); } @font-face { font-family: 'Ionicons'; src: url('./fonts/Ionicons.ttf') format('truetype'); } @font-face { font-family: 'MaterialIcons'; src: url('./fonts/MaterialIcons.ttf') format('truetype'); } @font-face { font-family: 'MaterialCommunityIcons'; src: url('./fonts/MaterialCommunityIcons.ttf') format('truetype'); } @font-face { font-family: 'Octicons'; src: url('./fonts/Octicons.ttf') format('truetype'); } @font-face { font-family: 'SimpleLineIcons'; src: url('./fonts/SimpleLineIcons.ttf') format('truetype'); } @font-face { font-family: 'Zocial'; src: url('./fonts/Zocial.ttf') format('truetype'); } .App { width: 100%; } .Header-Container { background-color: #000; padding: 10px 10px 10px 10px; width: 100%; } .Header-Content { width: 100%; max-width: 1300px; padding: 0px 10px; } .Header-Title { color: #fff; opacity: 0.8; font-size: 18px; font-weight: normal; } .Search-Container { background-color: #3e3e3e; padding: 10px 10px 10px 10px; width: 100%; } .Search-Content { width: 100%; max-width: 1300px; padding: 0px 10px; position: relative; } .Search-Icon-Container { } .Search-Icon { font-size: 18px; color: #fff; opacity: 0.7; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } .Search-Input { background-color: transparent; width: 100%; font-size: 16px; margin-left: 25px; border: 0; padding: 10px 5px; color: #fff; } .Search-Input:focus { outline: none; } .Result-Title { font-weight: normal; opacity: 0.6; font-size: 14px; } .Result-Row { margin-top: 20px; } .Result-Icon-Container { vertical-align: top; width: 100px; display: inline-block; background-color: rgba(0, 0, 0, 0.02); border-radius: 3px; margin-right: 10px; } .Result-Icon { font-size: 35px; } .Result-Icon-Name { font-size: 14px; font-weight: normal; opacity: 0.8; margin: 10px 0 0 0; display: inline-block; } .Result-Family-Name { font-size: 14px; font-weight: normal; opacity: 0.6; display: inline-block; } .Container { max-width: 1300px; margin: 0 auto; min-height: 100%; min-width: 100%; } html, body, #root, .App { height: 100%; overflow: hidden; } #root { max-width: 800px; margin: 0 auto; box-shadow: 0px 10px 10px #ccc; } *:focus { outline: none; }