api: refactor naming and code structuring

packages/transform/index.d.ts

@@ -3,6 +3,7 @@ export interface ConfigType {
   cleanupIDs: boolean;
   jsxSingleQuote: boolean;
   memo: boolean;
+  reactNative: boolean;
 }
 
 declare const transform: (svg: string, config: ConfigType) => Promise<string>;

packages/transform/index.js

@@ -3,6 +3,7 @@ const parse = require('./lib/parser');
 const transform = require('./lib/transformer');
 const stringify = require('./lib/stringifier');
 const format = require('./lib/formatter');
+const getAlternativeImports = require('./lib/getAlternativeImports');
 
 /**
  * Clean-up and transform SVG into valid JSX.
@@ -11,11 +12,15 @@ const format = require('./lib/formatter');
  * @returns {string}
  */
 async function transformer(svg, config = {}) {
+  let imports = [];
   const cleaned = await clean(svg, config);
-  const parsed = parse(cleaned.data);
+  const parsed = parse(cleaned.data, config);
+  if (config.reactNative) {
+    imports = getAlternativeImports(parsed);
+  }
   const transformed = transform(parsed);
   const morphed = stringify(transformed);
-  const formatted = format(morphed, config);
+  const formatted = format(morphed, config, imports);
 
   return formatted;
 }

packages/transform/lib/formatter.js

@@ -9,6 +9,7 @@ const template = require('lodash.template');
 const TEMPLATES = {
   class: `
     import React from "react";
+    <%= alternativeImports %>
 
     class Icon extends <%= parentComponent %> {
       render() {
@@ -20,6 +21,7 @@ const TEMPLATES = {
   `,
   functional: `
     import React from "react";
+    <%= alternativeImports %>
     
     function Icon() {
       return <%= svg %>;
@@ -35,8 +37,14 @@ const TEMPLATES = {
  * @param {string="functional","class"} config.type Desired component type.
  * @return {string}
  */
-function reactify(svg, { type = 'functional', memo }) {
+function reactify(svg, { type = 'functional', memo, reactNative }, imports) {
+  let alternativeImports = '';
+  if (reactNative) {
+    const importObj = imports.toString();
+    alternativeImports = `import {${importObj}} from 'react-native-svg';`;
+  }
   const data = {
+    alternativeImports,
     parentComponent: memo ? `React.PureComponent` : `React.Component`,
     exportComponent: memo ? `React.memo(Icon)` : `Icon`,
   };
@@ -56,8 +64,8 @@ function reactify(svg, { type = 'functional', memo }) {
  * @param {Object=} config Component type, SVGO and Prettier config.
  * @return {string}
  */
-function format(svg, config) {
-  const component = reactify(svg, config);
+function format(svg, config, imports) {
+  const component = reactify(svg, config, imports);
   const formatted = prettier.format(component, {
     ...config,
     parser: 'babel',

packages/transform/lib/getAlternativeImports.js

@@ -0,0 +1,19 @@
+function getAlternativeImports(el, imports) {
+    if (!imports) {
+        imports = [];
+    }
+    const titleCasedName = el.name[0].toUpperCase() + el.name.substring(1);
+
+    if (!imports.includes(titleCasedName)) {
+        imports.push(titleCasedName);
+    }
+
+    if (el.children) {
+        el.children.map(childEl => getAlternativeImports(childEl, imports));
+    }
+
+    return imports;
+}
+
+module.exports = getAlternativeImports;
+

packages/transform/lib/parser.js

@@ -1,12 +1,27 @@
 const parser = require('svg-parser');
 
+function formatParsedToReactNative(el) {
+  const {
+    name,
+    children,
+  } = el;
+  el.name = name[0].toUpperCase() + name.substring(1);
+  if (children) {
+    children.forEach(childEl => formatParsedToReactNative(childEl));
+  }
+  return el;
+}
+
 /**
  * Creates tree data from SVG string.
  * @param {string} svg SVG string.
  * @returns {Object}
  */
-function parse(svg) {
-  return parser.parse(svg);
+function parse(svg, config) {
+  const parsed = parser.parse(svg);
+  if (config.reactNative) {
+    formatParsedToReactNative(parsed);
+  }
+  return parsed;
 }
-
 module.exports = parse;