fixes #55 - using icons as actual svgs

Author: tnovau

.eslintrc

@@ -28,6 +28,7 @@
     "react/jsx-handler-names": 0,
     "react/jsx-fragments": 0,
     "react/no-unused-prop-types": 0,
+    "no-unused-expressions": 0,
     "import/export": 0
   }
 }

README.md

@@ -28,6 +28,15 @@ import { CircleFlag } from 'react-circle-flags'
 export const ArgentinianFlag = () => <CircleFlag countryCode="ar" height="35" cdnUrl="https://magic-cdn.com/flags/" />
 ```
 
+### With inline svgs instead of using images
+
+```jsx
+import React from 'react'
+import { CircleFlag } from 'react-circle-flags'
+
+export const ArgentinianFlag = () => <CircleFlag countryCode="ar" height="35" cdnUrl="https://magic-cdn.com/flags/" />
+```
+
 You can pass all the react's `React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>` props to CircleFlag. :rocket:
 
 ### Language flags

docs/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-unused-expressions": "off"
+  }
+}

index.d.ts

@@ -12,6 +12,10 @@ interface CircleFlagProps extends DetailedHTMLProps<
    * Custom CDN URL to use.
    */
   cdnUrl?: string
+  /**
+   * Whether to use inline SVG rendering.
+   */
+  inline?: boolean
 }
 
 interface CircleFlagLanguageProps extends DetailedHTMLProps<
@@ -26,6 +30,10 @@ interface CircleFlagLanguageProps extends DetailedHTMLProps<
    * Custom CDN URL to use.
    */
   cdnUrl?: string
+  /**
+   * Whether to use inline SVG rendering.
+   */
+  inline?: boolean
 }
 
 /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-circle-flags",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "A React component with a collection of 300+ minimal circular SVG country flags",
   "author": "Tomás Novau(tnovau@ontheedge.cloud)",
   "license": "MIT",

src/index.js

@@ -7,17 +7,20 @@ const FILE_SUFFIX = 'svg'
 
 const UNKNOWN_FLAG = 'xx'
 const DEFAULT_HEIGHT = 100
+const DEFAULT_WIDTH = 100
 
 /**
  * @param {string} code
  * @param {string} cdnUrl
  * @param {DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>} otherProps
  * @param {string} cdnSuffix
+ * @return {DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>}
  */
 const getSvgProps = (code, cdnUrl, otherProps, cdnSuffix = '') => ({
   ...otherProps,
   title: otherProps.title || code,
   height: otherProps.height || DEFAULT_HEIGHT,
+  width: otherProps.width || DEFAULT_WIDTH,
   src: `${cdnUrl || CDN_URL}${cdnSuffix}${code}.${FILE_SUFFIX}`
 })
 
@@ -30,33 +33,85 @@ const parseCountryCode = (countryCode) =>
 const parseLanguageCode = (languageCode) =>
   languages[languageCode] ? languageCode : UNKNOWN_FLAG
 
+/**
+ * @param {DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>} props
+ */
+class SvgInline extends React.Component {
+  constructor(props) {
+    super(props);
+    this.ref = React.createRef();
+  }
+
+  componentDidMount() {
+    this.loadSvg();
+    console.log(this.ref.current);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.src !== this.props.src) {
+      this.loadSvg();
+    }
+    debugger;
+    console.log(this.ref.current);
+  }
+
+  loadSvg() {
+    fetch(this.props.src)
+      .then(res => res.text())
+      .then(svgHTML => {
+        if (this.ref.current) {
+          const parser = new DOMParser();
+          const svgDoc = parser.parseFromString(svgHTML, 'image/svg+xml');
+          /** @type {SVGSVGElement} */
+          const svgElement = svgDoc.documentElement;
+          for (const prop in this.props) {
+            if (prop === 'src') continue;
+            svgElement.setAttribute(prop, this.props[prop]);
+          }
+
+          this.ref.current.outerHTML = svgElement.outerHTML;
+        }
+      });
+  }
+
+  render() {
+    return <img {...this.props} ref={this.ref} />;
+  }
+}
+
 /**
  * @param {import('../index').CircleFlagProps} param0
  */
-export const CircleFlag = ({ countryCode, cdnUrl, ...otherProps }) => (
-  <img
-    data-testid='circle-country-flag'
-    {...getSvgProps(
-      parseCountryCode(countryCode).toLowerCase(),
-      cdnUrl,
-      otherProps
-    )}
-  />
-)
+export const CircleFlag = ({ countryCode, cdnUrl, inline, ...otherProps }) => {
+  const Component = inline ? SvgInline : 'img';
+  return (
+    <Component
+      data-testid='circle-country-flag'
+      {...getSvgProps(
+        parseCountryCode(countryCode).toLowerCase(),
+        cdnUrl,
+        otherProps
+      )}
+    />
+  )
+}
 
 /**
  * @param {import('../index').CircleFlagLanguage} param0
  */
-export const CircleFlagLanguage = ({ languageCode, cdnUrl, ...otherProps }) => (
-  <img
-    data-testid='circle-language-flag'
-    {...getSvgProps(
-      parseLanguageCode(languageCode).toLowerCase(),
-      cdnUrl,
-      otherProps,
-      'language/'
-    )}
-  />
-)
+export const CircleFlagLanguage = ({ languageCode, cdnUrl, inline, ...otherProps }) => {
+  const Component = inline ? SvgInline : 'img';
+  return (
+    <Component
+      data-testid='circle-language-flag'
+      {...getSvgProps(
+        parseLanguageCode(languageCode).toLowerCase(),
+        cdnUrl,
+        otherProps,
+        'language/'
+      )}
+    />
+  )
+}
 
 export { countries, languages }