fix: move iconic font to @quid/theme

There's no way to get the font to get imported inside a UDM or CJS bundle, I moved it to @quid/theme and exposed it as a .css file that can be imported by the consumer as they prefer.

packages/react-core/package.json

@@ -24,7 +24,6 @@
     "@emotion/styled": "^10.0.4",
     "@quid/theme": "^1.7.0",
     "color": "^3.1.0",
-    "emotion": "^10.0.4",
     "react-router-dom": "^4.3.1"
   },
   "peerDependencies": {

packages/react-core/src/Icon/Icon.md

@@ -1,14 +1,18 @@
 With the `Icon` component you can insert one of the supported icons
 in your component:
 
-```js
-<Icon name="globe" style={{ fontSize: '2em' }} />
+```js static
+// first import the iconic font in your root index.js file
+import '@quid/theme/fonts/icons';
+
+// then use the Icon component anywhere in your app
+<Icon name="globe" />;
 ```
 
 This is the complete list of available icons:
 
 ```js noeditor
-const iconNames = require('./icons/quid-icons.json').icons.map(
+const iconNames = require('@quid/theme/fonts/icons/quid-icons.json').icons.map(
   ({ icon }) => icon.tags[0]
 );
 const cell = {

packages/react-core/src/Icon/index.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import { injectGlobal } from 'emotion';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 
@@ -41,21 +40,6 @@ type Props = {
   squared?: boolean,
 };
 
-// FIXME(fzivolo): JSDOM doesn't really like this unfortunately
-// istanbul ignore next
-if (process.env.NODE_ENV !== 'test') {
-  injectGlobal`
-    @font-face {
-      font-family: 'quid-icons';
-      src: url(${require('./icons/quid-icons.ttf')}) format('truetype'),
-        url(${require('./icons/quid-icons.woff')}) format('woff'),
-        url(${require('./icons/quid-icons.svg')}) format('svg');
-      font-weight: normal;
-      font-style: normal;
-    }
-  `;
-}
-
 const Icon = ({ name, squared = true }: Props) => (
   <I squared={squared}>{name}</I>
 );

packages/theme/README.md

@@ -83,4 +83,21 @@ const Paragraph = styled.p`
 `;
 ```
 
+### Font Faces
+
+This package exposes two font-faces, IBM Plex (Sans and Serif), and the
+iconic Quid Icons.
+
+The first is used as font family of all our texts, while the second is
+an iconic font family used to provide our icons.
+
+You can import both of them in your project with:
+
+```js static
+import '@quid/theme/fonts/ibmplex';
+import '@quid/theme/fonts/icons';
+```
+
+Once imported, they will be globally available for all the consumer components.
+
 [theme-provider]: https://emotion.sh/docs/emotion-theming

packages/theme/fonts/icons/index.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: 'quid-icons';
+  src: url('quid-icons.ttf') format('truetype'),
+    url('quid-icons.woff') format('woff'),
+    url('quid-icons.svg#quid-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}

styleguide.config.js

@@ -34,5 +34,9 @@ module.exports = {
     },
   ],
   usageMode: 'expand',
-  require: ['@quid/theme/fonts/ibmplex/index.css', './src/index.css'],
+  require: [
+    '@quid/theme/fonts/ibmplex/index.css',
+    '@quid/theme/fonts/icons/index.css',
+    './src/index.css',
+  ],
 };

yarn.lock

@@ -4102,16 +4102,6 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
-create-emotion@^10.0.4:
-  version "10.0.4"
-  resolved "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.4.tgz#c3bdd8f2aba790eb559e44b481027b9e33f2e49c"
-  integrity sha512-IQqKZFZz3DYnHB3wfww4oc/tsKpaWxrd2mspaFyFqTRqJZABJWgXBZB+FD7UIrUOQDmxY03xcMbcdk3oGiUNZg==
-  dependencies:
-    "@emotion/cache" "10.0.0"
-    "@emotion/serialize" "^0.11.2"
-    "@emotion/sheet" "0.9.2"
-    "@emotion/utils" "0.11.1"
-
 create-hash@^1.1.0, create-hash@^1.1.2:
   version "1.2.0"
   resolved "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -5020,14 +5010,6 @@ emotion-theming@^10.0.2:
     hoist-non-react-statics "^2.3.1"
     object-assign "^4.1.1"
 
-emotion@^10.0.4:
-  version "10.0.4"
-  resolved "https://registry.npmjs.org/emotion/-/emotion-10.0.4.tgz#52d727fb27e7ab653d2ca658c1a099c9180f1513"
-  integrity sha512-Mf35807fna4AuQI61rhpsJNDtV4C1N/Y0d2GLbPLqmDUV6prWL4Zy3hAhVBI6nQL1cfPVGdFwq2gApjgVi1l7w==
-  dependencies:
-    babel-plugin-emotion "^10.0.4"
-    create-emotion "^10.0.4"
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -9016,7 +8998,7 @@ methods@~1.1.2:
   resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-microbundle@^0.8.3:
+microbundle@^0.8.3, "microbundle@https://github.com/developit/microbundle.git#remove_import_pruning":
   version "0.8.3"
   resolved "https://github.com/developit/microbundle.git#296026b0654427ecf917841d10892bf482cc73c0"
   dependencies: