react-native-vector-image 0.3.2 → 0.4.0

package/README.md

@@ -74,6 +74,8 @@ yarn react-native-vector-image generate
 | `--no-ios-output`     | Disable iOS output.                             | `false`                       |
 | `--android-output`    | Path to an Android `res` folder.                | `android/app/src/main/res`    |
 | `--no-android-output` | Disable Android output.                         | `false`                       |
+| `--current-color`       | Replace any `current` color references in SVGs. | `#000000`                       |
+| `--current-color-dark`       | Replace any `current` color references in `.dark.svg` SVGs. | `#ffffff`                       |
 
 ### Step 3: recompile
 
@@ -93,6 +95,10 @@ Some optimizations applied by SVGO are not compatible with the SVG parser on And
 
 It means that the native vector asset does not exist or is out of sync with the SVG. Simply generate the files and recompile the app.
 
+### the `generate` command does not generate any new assets
+
+Make sure your image component is used (imported) somewhere in your code, otherwise the asset generator won't find it.
+
 ## License
 
 [MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2021

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-vector-image",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Native vector images generated from SVG",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/cli/generateAssets.js

@@ -5,6 +5,7 @@ const generateAndroidAsset = require('./generateAndroidAsset');
 const getAssets = require('./getAssets');
 const getResourceName = require('../getResourceName');
 const resolveAssetSources = require('./resolveAssetSources');
+const readSvgAsset = require('./readSvgAsset');
 const { InputError, TransformationError } = require('./errors');
 
 async function removeGeneratedAssets(directory) {
@@ -28,6 +29,8 @@ async function generateAssets({
   config,
   entryFile,
   resetCache,
+  currentColor,
+  currentColorDark,
 }) {
   const assets = await getAssets({ config, entryFile, resetCache });
 
@@ -54,8 +57,8 @@ async function generateAssets({
 
           const resourceName = getResourceName(asset);
           const source = {
-            light: fs.readFileSync(light).toString(),
-            dark: dark && fs.readFileSync(dark).toString(),
+            light: readSvgAsset(light, currentColor),
+            dark: dark && readSvgAsset(dark, currentColorDark),
             width: asset.width,
             height: asset.height,
           };

package/src/cli/getAssets.js

@@ -9,11 +9,14 @@ async function getAssets(options) {
     dev: false,
     minify: false,
     platform: 'ios',
-    resetCache: options.resetCache,
   };
 
   const config = await loadConfig(
-    { cwd: process.cwd(), config: options.config },
+    {
+      cwd: process.cwd(),
+      config: options.config,
+      resetCache: options.resetCache,
+    },
     {
       resolver: {
         resolverMainFields: ['react-native', 'browser', 'main'],

package/src/cli/index.js

@@ -44,6 +44,16 @@ function main(argv) {
           description: 'Path to an Android `res` folder',
           default: 'android/app/src/main/res',
         },
+        'current-color': {
+          description: 'Replace any `current` color references in SVGs.',
+          default: '#000000',
+          type: 'string',
+        },
+        'current-color-dark': {
+          description: 'Replace any `current` color references in `.dark.svg` SVGs.',
+          default: '#ffffff',
+          type: 'string',
+        },
       },
       async (options) => {
         try {

package/src/cli/readSvgAsset.js

@@ -0,0 +1,12 @@
+const fs = require('fs');
+
+const readSvgAsset = (path, currentColor) =>
+  fs
+    .readFileSync(path)
+    .toString()
+    .replace(
+      /\s(fill|stroke|stop-color|flood-color|lighting-color)=["']current["']/g,
+      (_, attribute) => ` ${attribute}="${currentColor}"`
+    );
+
+module.exports = readSvgAsset;

package/strip_svgs.gradle

@@ -1,11 +1,10 @@
 // This script removes .svg files generated by metro.
 
 gradle.projectsEvaluated {
-    def bundleTasks = tasks.findAll { task -> task.name.startsWith("bundle") && task.name.endsWith("JsAndAssets") && !task.name.contains("Debug") && task.enabled }
     android.applicationVariants.all { def variant ->
         def targetName = variant.name.capitalize()
         def targetPath = variant.dirName
-        def bundleTask = tasks.findByName("bundle${targetName}JsAndAssets")
+        def bundleTask = tasks.findByName("createBundle${targetName}Resources") ?: tasks.findByName("bundle${targetName}Resources")
         def mergeResourcesTask = tasks.findByName("merge${targetName}Resources")
         def cleanUpTask = tasks.create(name: "${bundleTask.name}_VectorImageCleanUp", type: Delete) {
             description = "strip generated svg assets"