Merge pull request #189 from dotkom/no-import-in-global-style

No import in global style
dotkom · Oct 9, 2020 · 5cd8922 · 5cd8922
2 parents 0eff4f5 + 16c4b43
commit 5cd8922
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,6 +76,10 @@
     "@storybook/addons": "^5.3.12",
     "@storybook/react": "^5.3.12",
     "@storybook/source-loader": "^5.3.12",
-    "@types/lodash": "^4.14.161"
+    "@types/lodash": "^4.14.161",
+    "fontsource-material-icons": "^3.0.2",
+    "fontsource-source-code-pro": "^3.0.10",
+    "fontsource-source-sans-pro": "^3.0.9",
+    "fontsource-source-serif-pro": "^3.0.10"
   }
 }
diff --git a/src/common/global.ts b/src/common/global.ts
@@ -1,10 +1,15 @@
 import { createGlobalStyle } from 'styled-components';
 import Reset from './reset';
 import { media, breakPointsInPX } from './layout';
+import 'fontsource-material-icons/outlined.css';
+import 'fontsource-source-sans-pro/300.css';
+import 'fontsource-source-sans-pro/400.css';
+import 'fontsource-source-sans-pro/700.css';
+import 'fontsource-source-serif-pro';
+import 'fontsource-source-code-pro';
 
 export const GlobalStyle = createGlobalStyle`
   ${Reset}
-  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Source+Serif+Pro|Source+Code+Pro|Material+Icons+Outlined');
 
   body {
     font-family: 'Source Sans Pro', sans-serif;

diff --git a/src/components/icon/Icon.tsx b/src/components/icon/Icon.tsx
@@ -14,7 +14,7 @@ const StyledIcon = styled.i`
 
 const Icon = ({ name, className = '', ...props }: IconProps) => {
   return (
-    <StyledIcon className={`material-icons-outlined ${className}`} {...props}>
+    <StyledIcon className={`material-icons ${className}`} {...props}>
       {name}
     </StyledIcon>
   );