[docs] Font vs SVG. Which approach to use? (mui#12466)

* Update icons.md * all good for me
oliviertassinari · Aug 11, 2018 · 49a74ad · 49a74ad
1 parent 22ac668
commit 49a74ad
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 101 deletions.
diff --git a/docs/src/pages/style/icons/icons.md b/docs/src/pages/style/icons/icons.md
@@ -107,3 +107,10 @@ Optionally, you can set the icon color using one of the theme color properties:
 ### [Font Awesome](https://fontawesome.com/icons)
 
 {{"demo": "pages/style/icons/FontAwesome.js", "hideEditButton": true}}
+
+## Font vs SVG. Which approach to use?
+
+Both approaches work fine, however, there are some subtle differences, especially in terms of performance and rendering quality.
+Whenever possible SVG is preferred as it allows code splitting, supports more icons, renders faster and better.
+
+For more details, you can check out [why GiHub migrated](https://blog.github.com/2016-02-22-delivering-octicons-with-svg/) from font icons to SVG icons.
diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.d.ts b/packages/material-ui/src/FormHelperText/FormHelperText.d.ts
@@ -12,7 +12,14 @@ export interface FormHelperTextProps
   required?: boolean;
 }
 
-export type FormHelperTextClassKey = 'root' | 'error' | 'disabled' | 'marginDense' | 'focused' | 'filled' | 'required';
+export type FormHelperTextClassKey =
+  | 'root'
+  | 'error'
+  | 'disabled'
+  | 'marginDense'
+  | 'focused'
+  | 'filled'
+  | 'required';
 
 declare const FormHelperText: React.ComponentType<FormHelperTextProps>;
 

diff --git a/packages/material-ui/src/FormLabel/FormLabel.d.ts b/packages/material-ui/src/FormLabel/FormLabel.d.ts
@@ -12,7 +12,14 @@ export interface FormLabelProps extends StandardProps<FormLabelBaseProps, FormLa
 
 export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
 
-export type FormLabelClassKey = 'root' | 'focused' | 'disabled' | 'error' | 'filled' | 'required' | 'asterisk';
+export type FormLabelClassKey =
+  | 'root'
+  | 'focused'
+  | 'disabled'
+  | 'error'
+  | 'filled'
+  | 'required'
+  | 'asterisk';
 
 declare const FormLabel: React.ComponentType<FormLabelProps>;
 

diff --git a/packages/material-ui/src/Popper/Popper.d.ts b/packages/material-ui/src/Popper/Popper.d.ts
@@ -20,12 +20,14 @@ export type PopperPlacementType =
 export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
   transition?: boolean;
   anchorEl?: null | HTMLElement | ReferenceObject | ((element: HTMLElement) => HTMLElement);
-  children: React.ReactNode | ((
-    props: {
-      placement: PopperPlacementType;
-      TransitionProps?: TransitionProps;
-    },
-  ) => React.ReactNode);
+  children:
+    | React.ReactNode
+    | ((
+        props: {
+          placement: PopperPlacementType;
+          TransitionProps?: TransitionProps;
+        },
+      ) => React.ReactNode);
   container?: PortalProps['container'];
   disablePortal?: PortalProps['disablePortal'];
   keepMounted?: boolean;

diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js
@@ -20,8 +20,7 @@ export default function createTypography(palette: Object, typography: Object | F
     // Apply the CSS properties to all the variants.
     allVariants,
     ...other
-  } =
-    typeof typography === 'function' ? typography(palette) : typography;
+  } = typeof typography === 'function' ? typography(palette) : typography;
 
   const coef = fontSize / 14;
   function pxToRem(value) {