[base] Use typescript for icons

packages/@sanity/base/src/components/icons/SanityLogo.tsx

@@ -0,0 +1,25 @@
+// part:@sanity/base/sanity-logo-icon
+
+import React from 'react'
+import IconBase from 'react-icon-base'
+
+export default function SanityLogo() {
+  return (
+    <IconBase viewBox="0 0 1024 1024">
+      <g className="sanityIconAnimate">
+        <path
+          className="sanityIconTop"
+          d="M508.7 200.4c109.2 0 153.1 61.9 170.4 105.2h152.6C796.9 160.5 679.6 77.8 507.3 77.8c-104.9 0-195 38.6-248.3 106.2 2.6 60.9 26.2 108.7 72.4 145.3 17.2-79.4 83.8-128.9 177.3-128.9z"
+        />
+        <path
+          className="sanityIconMiddle"
+          d="M624.4 458l-158.7-37.4c-42.8-11-79.6-24.9-110.6-41.9C285.3 340.5 245.2 287 233.6 217c-.4.9-.8 1.8-1.3 2.6-15.8 32.8-24 69.4-24 108 0 120.5 68.7 194.9 210 227.4l155.9 36c46.2 12.2 85.2 26.8 117.6 44.5 73.6 40.2 112.6 96 122.8 173.7.4-.7.7-1.4 1.1-2.2 17.2-33.9 25.9-72.2 25.9-114.4-.1-152.1-118.2-211.5-217.2-234.6z"
+        />
+        <path
+          className="sanityIconBottom"
+          d="M531.4 821.6c-91.6 0-156.3-40.3-183.4-113.8H188.5C222.6 857.1 350 945.6 532.8 945.6c108.7 0 201.4-37.7 255.7-103.7-2.2-67.4-24.4-117.5-71.5-155.6-15.2 84.4-83.7 135.3-185.6 135.3z"
+        />
+      </g>
+    </IconBase>
+  )
+}

packages/@sanity/components/src/menus/stories/default.tsx

@@ -15,7 +15,7 @@ export function DefaultStory() {
   const items: MenuItemType[] = range(number('#items', 30)).map((item, i) => {
     return {
       title: chance.name(),
-      icon: icon,
+      icon: icon || undefined,
       key: String(i)
     }
   })

packages/@sanity/components/src/selects/CustomSelect.tsx

@@ -83,7 +83,7 @@ export default class CustomSelect extends React.Component<CustomSelectProps> {
           <div className={styles.selectContainer}>
             <span className={styles.text}>{renderItem(value)}</span>
             <div className={styles.arrow}>
-              <FaAngleDown color="inherit" />
+              <FaAngleDown />
             </div>
           </div>
         </div>

packages/@sanity/components/src/selects/DefaultSelect.tsx

@@ -78,7 +78,7 @@ export default class DefaultSelect extends React.Component<
         </select>
         <div className={styles.functions}>
           <span className={styles.arrow}>
-            <FaAngleDown color="inherit" />
+            <FaAngleDown />
           </span>
         </div>
       </div>

packages/@sanity/components/src/selects/StatelessSearchableSelect.tsx

@@ -176,7 +176,7 @@ export default class StatelessSearchableSelect extends React.PureComponent<
                 )}
                 {!readOnly && onClear && value && (
                   <button type="button" className={styles.clearButton} onClick={onClear}>
-                    <CloseIcon color="inherit" />
+                    <CloseIcon />
                   </button>
                 )}
                 {!readOnly && (
@@ -188,7 +188,7 @@ export default class StatelessSearchableSelect extends React.PureComponent<
                         tabIndex={0}
                         onKeyPress={disabled ? undefined : this.handleArrowKeyPress}
                       >
-                        <FaAngleDown color="inherit" />
+                        <FaAngleDown />
                       </div>
                     )}
                     {isLoading && (

packages/@sanity/components/src/selects/StyleSelect.tsx

@@ -205,7 +205,7 @@ class StyleSelect extends React.PureComponent<StyleSelectProps> {
               {!value && placeholder}
             </span>
             <span className={styles.arrow}>
-              <ArrowIcon color="inherit" />
+              <ArrowIcon />
             </span>
           </div>
         </button>
@@ -239,8 +239,7 @@ class StyleSelect extends React.PureComponent<StyleSelectProps> {
                       >
                         <div className={styles.itemContent}>{renderItem(item)}</div>
                         <div className={styles.itemIcon}>
-                          {isSelected && <CheckmarkIcon />}
-                          {isSemiSelected && <CheckmarkIcon style={{opacity: 0.5}} />}
+                          {(isSelected || isSemiSelected) && <CheckmarkIcon />}
                         </div>
                       </div>
                     </li>

packages/@sanity/components/src/textareas/DefaultTextArea.tsx

@@ -75,7 +75,7 @@ export default class DefaultTextArea extends React.Component<
 
         {isClearable && !this.props.disabled && (
           <button type="button" className={styles.clearButton} onClick={onClear}>
-            <IoAndroidClose color="inherit" />
+            <IoAndroidClose />
           </button>
         )}
       </div>

packages/@sanity/components/src/textinputs/TextInput.tsx

@@ -74,7 +74,7 @@ export default class DefaultTextInput extends React.PureComponent<DefaultTextInp
 
         {isClearable && (
           <button className={styles.clearButton} onClick={onClear} type="button">
-            <CloseIcon color="inherit" />
+            <CloseIcon />
           </button>
         )}
       </div>

packages/@sanity/components/src/toggles/stories/toggleButton.tsx

@@ -26,7 +26,7 @@ export function ToggleButtonStory() {
           selected={boolean('selected', false, 'props')}
           disabled={boolean('disabled', false, 'props')}
           onClick={action('onClick')}
-          icon={icon}
+          icon={icon || undefined}
         >
           {text('children', 'this is the content', 'props')}
         </ToggleButton>