feat(custom flags): add custom flags usage example

see: matteocng/react-flag-icon-css#1

Author: matteocng

src/js/App.js

@@ -34,6 +34,9 @@ const AppFactory = (options: AppFactoryOptionsType) : ReactType.createElement =>
         <div {...propsSubHeading}>{props.subHeadingText}</div>
       </div>
       <div {...propsFlagContainer}>
+        <FlagBlock name="Custom 1" code="w1" />
+        <FlagBlock name="Custom 2" code="w2" />
+        <FlagBlock name="Custom 3" code="w3" />
         { aCountries.map((obj: CountryType) : React$Element<FlagBlock> => renderFlagBlock(obj)) }
       </div>
     </span>)

src/js/CustomFlag.js

@@ -5,9 +5,11 @@ import FlagIconFactory from 'react-flag-icon-css'
 import { pick } from './functions'
 import type { CustomFlagPropsType } from '../types/flow'
 
+import themeStyles from '../meta-flags-css'
+
 
 export default ({ ...props, children }: CustomFlagPropsType) : React$Element<*> => {
-  const FlagIcon = FlagIconFactory(React, { useCssModules: __USE_CSS_MODULES__ })
+  const FlagIcon = FlagIconFactory(React, { useCssModules: __USE_CSS_MODULES__, themeStyles })
   const { className } = props
   const flagIconProps = pick(props, ['code', 'size', 'flip', 'rotate', 'squared', 'Component'])
 

src/meta-flags-css/CustomFlags.scss

@@ -0,0 +1,11 @@
+$flag-icon-css-path: './images' !default;
+@import '../../node_modules/flag-icon-css/sass/variables';
+@import '../../node_modules/flag-icon-css/sass/flag-icon-base';
+
+@include flag-icon(w1);
+@include flag-icon(w2);
+@include flag-icon(w3);
+
+.theme-base {
+  cursor: default; // just a placeholder
+}

src/meta-flags-css/images/1x1/w1.svg

@@ -0,0 +1 @@
+export { default } from './CustomFlags.scss'