react-native-vector-image 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +11 -12
  2. package/package.json +1 -1
  3. package/src/cli/convertSvgToPdf.spec.js +15 -0
  4. package/src/cli/convertSvgToVd.spec.js +37 -0
  5. package/src/cli/fixtures/current-color.svg +1 -0
  6. package/src/cli/fixtures/drop-shadow.svg +15 -0
  7. package/src/cli/fixtures/index.js +11 -0
  8. package/src/cli/fixtures/react-logo.svg +1 -0
  9. package/src/cli/fixtures/rectangle.svg +1 -0
  10. package/src/cli/getAssets.js +0 -1
  11. package/src/cli/readSvgAsset.js +1 -1
  12. package/src/cli/readSvgAsset.spec.js +12 -0
  13. package/src/getResourceName.spec.js +25 -0
package/README.md CHANGED
@@ -5,7 +5,6 @@
5
5
 
6
6
  [![Tests](https://github.com/oblador/react-native-vector-image/actions/workflows/tests.yml/badge.svg)](https://github.com/oblador/react-native-vector-image/actions/workflows/tests.yml) [![npm](https://img.shields.io/npm/v/react-native-vector-image.svg)](https://npmjs.com/package/react-native-vector-image)
7
7
 
8
-
9
8
  - Faster render – ~5x faster than `react-native-svg`.
10
9
  - Smaller JS bundle = faster startup.
11
10
  - Native support for dark mode.
@@ -65,17 +64,17 @@ This takes a while as metro has to go through all the code to find the imported
65
64
  yarn react-native-vector-image generate
66
65
  ```
67
66
 
68
- | Argument | Description | Default |
69
- | --------------------- | ----------------------------------------------- | ----------------------------- |
70
- | `--entry-file` | Path to the app entrypoint file. | `index.js` |
71
- | `--config` | Path to the metro config file. | `metro.config.js` |
72
- | `--reset-cache` | Reset metro cache before extracting SVG assets. | `false` |
73
- | `--ios-output` | Path to an iOS `.xcassets` folder. | `ios/AppName/Images.xcassets` |
74
- | `--no-ios-output` | Disable iOS output. | `false` |
75
- | `--android-output` | Path to an Android `res` folder. | `android/app/src/main/res` |
76
- | `--no-android-output` | Disable Android output. | `false` |
77
- | `--current-color` | Replace any `current` color references in SVGs. | `#000000` |
78
- | `--current-color-dark` | Replace any `current` color references in `.dark.svg` SVGs. | `#ffffff` |
67
+ | Argument | Description | Default |
68
+ | ---------------------- | ---------------------------------------------------------------- | ----------------------------- |
69
+ | `--entry-file` | Path to the app entrypoint file. | `index.js` |
70
+ | `--config` | Path to the metro config file. | `metro.config.js` |
71
+ | `--reset-cache` | Reset metro cache before extracting SVG assets. | `false` |
72
+ | `--ios-output` | Path to an iOS `.xcassets` folder. | `ios/AppName/Images.xcassets` |
73
+ | `--no-ios-output` | Disable iOS output. | `false` |
74
+ | `--android-output` | Path to an Android `res` folder. | `android/app/src/main/res` |
75
+ | `--no-android-output` | Disable Android output. | `false` |
76
+ | `--current-color` | Replace any `currentColor` color references in SVGs. | `#000000` |
77
+ | `--current-color-dark` | Replace any `currentColor` color references in `.dark.svg` SVGs. | `#ffffff` |
79
78
 
80
79
  ### Step 3: recompile
81
80
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-vector-image",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Native vector images generated from SVG",
5
5
  "main": "src/index.js",
6
6
  "types": "src/index.d.ts",
package/src/cli/convertSvgToPdf.spec.js ADDED
@@ -0,0 +1,15 @@
1
+ const path = require('path');
2
+ const convertSvgToPdf = require('./convertSvgToPdf');
3
+ const { reactLogo } = require('./fixtures');
4
+ const { readStream } = require('./streams');
5
+
6
+ const convert = (fixture, size) => readStream(convertSvgToPdf(fixture, size));
7
+
8
+ describe('convertSvgToPdf', () => {
9
+ it('is deterministic', async () => {
10
+ const size = [300, 267];
11
+ const file1 = await convert(reactLogo, size);
12
+ const file2 = await convert(reactLogo, size);
13
+ expect(file1.equals(file2)).toBe(true);
14
+ });
15
+ });
package/src/cli/convertSvgToVd.spec.js ADDED
@@ -0,0 +1,37 @@
1
+ const convertSvgToVd = require('./convertSvgToVd');
2
+ const { reactLogo, rectangle, dropShadow } = require('./fixtures');
3
+ const { readStream } = require('./streams');
4
+
5
+ const convert = (fixture) => readStream(convertSvgToVd(fixture));
6
+
7
+ describe('convertSvgToVd', () => {
8
+ it('is deterministic', async () => {
9
+ const file1 = await convert(reactLogo);
10
+ const file2 = await convert(reactLogo);
11
+ expect(file1.equals(file2)).toBe(true);
12
+ });
13
+
14
+ it('supports rgba colors', async () => {
15
+ const result = (await convert(rectangle)).toString();
16
+ expect(result).toEqual(
17
+ expect.stringContaining('android:fillColor="#d8d8d880"')
18
+ );
19
+ expect(result).toEqual(
20
+ expect.stringContaining('android:strokeColor="#979797"')
21
+ );
22
+ });
23
+
24
+ it('throws for non-svg files', async () => {
25
+ await expect(convert('garbage')).rejects.toThrowErrorMatchingInlineSnapshot(
26
+ `"Not a proper SVG file"`
27
+ );
28
+ });
29
+
30
+ it('throws for unsupported elements like feGaussianBlur', async () => {
31
+ await expect(
32
+ convert(dropShadow)
33
+ ).rejects.toThrowErrorMatchingInlineSnapshot(
34
+ `"line 4: <filter> is not supported; line 5: <feOffset> is not supported; line 6: <feGaussianBlur> is not supported; line 7: <feComposite> is not supported; line 8: <feColorMatrix> is not supported"`
35
+ );
36
+ });
37
+ });
package/src/cli/fixtures/current-color.svg ADDED
@@ -0,0 +1 @@
1
+ <svg height="50" viewBox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg"><path d="m.5.5h49v49h-49z" fill="current" fill-rule="evenodd" stroke="current"/></svg>
package/src/cli/fixtures/drop-shadow.svg ADDED
@@ -0,0 +1,15 @@
1
+ <svg width="58px" height="58px" viewBox="0 0 58 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2
+ <defs>
3
+ <rect id="path-1" x="4" y="2" width="50" height="50"></rect>
4
+ <filter x="-14.0%" y="-10.0%" width="128.0%" height="128.0%" filterUnits="objectBoundingBox" id="filter-2">
5
+ <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
6
+ <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
7
+ <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
8
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
9
+ </filter>
10
+ </defs>
11
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
12
+ <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
13
+ <rect stroke="#979797" stroke-width="1" stroke-linejoin="square" fill="#D8D8D8" fill-rule="evenodd" x="4.5" y="2.5" width="49" height="49"></rect>
14
+ </g>
15
+ </svg>
package/src/cli/fixtures/index.js ADDED
@@ -0,0 +1,11 @@
1
+ const fs = require('fs-extra');
2
+ const path = require('path');
3
+
4
+ const readFixture = (file) =>
5
+ fs.readFileSync(path.join(__dirname, file), 'utf8').toString();
6
+
7
+ module.exports = {
8
+ dropShadow: readFixture('drop-shadow.svg'),
9
+ reactLogo: readFixture('react-logo.svg'),
10
+ rectangle: readFixture('rectangle.svg'),
11
+ };
package/src/cli/fixtures/react-logo.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="300" height="267" xmlns="http://www.w3.org/2000/svg"><g fill="#61DAFB" fill-rule="nonzero"><path d="M299.573171,133.231707 C299.573171,113.414634 274.756098,94.6341463 236.707317,82.9878049 C245.487805,44.2073171 241.585366,13.3536585 224.390244,3.47560976 C220.426829,1.15853659 215.792683,0.0609756098 210.731707,0.0609756098 L210.731707,13.6585366 C213.536585,13.6585366 215.792683,14.2073171 217.682927,15.2439024 C225.97561,20 229.573171,38.1097561 226.768293,61.402439 C226.097561,67.1341463 225,73.1707317 223.658537,79.3292683 C211.707317,76.402439 198.658537,74.1463415 184.939024,72.6829268 C176.707317,61.402439 168.170732,51.1585366 159.573171,42.195122 C179.45122,23.7195122 198.109756,13.597561 210.792683,13.597561 L210.792683,0 C210.792683,0 210.792683,0 210.792683,0 C194.02439,0 172.073171,11.9512195 149.878049,32.6829268 C127.682927,12.0731707 105.731707,0.243902439 88.9634146,0.243902439 L88.9634146,13.8414634 C101.585366,13.8414634 120.304878,23.902439 140.182927,42.2560976 C131.646341,51.2195122 123.109756,61.402439 115,72.6829268 C101.219512,74.1463415 88.1707317,76.402439 76.2195122,79.3902439 C74.8170732,73.2926829 73.7804878,67.3780488 73.0487805,61.7073171 C70.1829268,38.4146341 73.7195122,20.304878 81.9512195,15.4878049 C83.7804878,14.3902439 86.1585366,13.902439 88.9634146,13.902439 L88.9634146,0.304878049 C88.9634146,0.304878049 88.9634146,0.304878049 88.9634146,0.304878049 C83.8414634,0.304878049 79.2073171,1.40243902 75.1829268,3.7195122 C58.0487805,13.597561 54.2073171,44.3902439 63.0487805,83.0487805 C25.1219512,94.7560976 0.426829268,113.47561 0.426829268,133.231707 C0.426829268,153.04878 25.2439024,171.829268 63.2926829,183.47561 C54.5121951,222.256098 58.4146341,253.109756 75.6097561,262.987805 C79.5731707,265.304878 84.2073171,266.402439 89.3292683,266.402439 C106.097561,266.402439 128.04878,254.45122 150.243902,233.719512 C172.439024,254.329268 194.390244,266.158537 211.158537,266.158537 C216.280488,266.158537 220.914634,265.060976 224.939024,262.743902 C242.073171,252.865854 245.914634,222.073171 237.073171,183.414634 C274.878049,171.768293 299.573171,152.987805 299.573171,133.231707 Z M220.182927,92.5609756 C217.926829,100.426829 215.121951,108.536585 211.95122,116.646341 C209.45122,111.768293 206.829268,106.890244 203.963415,102.012195 C201.158537,97.1341463 198.170732,92.3780488 195.182927,87.7439024 C203.841463,89.0243902 212.195122,90.6097561 220.182927,92.5609756 Z M192.256098,157.5 C187.5,165.731707 182.621951,173.536585 177.560976,180.792683 C168.47561,181.585366 159.268293,182.012195 150,182.012195 C140.792683,182.012195 131.585366,181.585366 122.560976,180.853659 C117.5,173.597561 112.560976,165.853659 107.804878,157.682927 C103.170732,149.695122 98.9634146,141.585366 95.1219512,133.414634 C98.902439,125.243902 103.170732,117.073171 107.743902,109.085366 C112.5,100.853659 117.378049,93.0487805 122.439024,85.7926829 C131.52439,85 140.731707,84.5731707 150,84.5731707 C159.207317,84.5731707 168.414634,85 177.439024,85.7317073 C182.5,92.9878049 187.439024,100.731707 192.195122,108.902439 C196.829268,116.890244 201.036585,125 204.878049,133.170732 C201.036585,141.341463 196.829268,149.512195 192.256098,157.5 Z M211.95122,149.573171 C215.243902,157.743902 218.04878,165.914634 220.365854,173.841463 C212.378049,175.792683 203.963415,177.439024 195.243902,178.719512 C198.231707,174.02439 201.219512,169.207317 204.02439,164.268293 C206.829268,159.390244 209.45122,154.45122 211.95122,149.573171 Z M150.121951,214.634146 C144.45122,208.780488 138.780488,202.256098 133.170732,195.121951 C138.658537,195.365854 144.268293,195.54878 149.939024,195.54878 C155.670732,195.54878 161.341463,195.426829 166.890244,195.121951 C161.402439,202.256098 155.731707,208.780488 150.121951,214.634146 Z M104.756098,178.719512 C96.097561,177.439024 87.7439024,175.853659 79.7560976,173.902439 C82.0121951,166.036585 84.8170732,157.926829 87.9878049,149.817073 C90.4878049,154.695122 93.1097561,159.573171 95.9756098,164.45122 C98.8414634,169.329268 101.768293,174.085366 104.756098,178.719512 Z M149.817073,51.8292683 C155.487805,57.6829268 161.158537,64.2073171 166.768293,71.3414634 C161.280488,71.097561 155.670732,70.9146341 150,70.9146341 C144.268293,70.9146341 138.597561,71.0365854 133.04878,71.3414634 C138.536585,64.2073171 144.207317,57.6829268 149.817073,51.8292683 Z M104.695122,87.7439024 C101.707317,92.4390244 98.7195122,97.2560976 95.9146341,102.195122 C93.1097561,107.073171 90.4878049,111.95122 87.9878049,116.829268 C84.695122,108.658537 81.8902439,100.487805 79.5731707,92.5609756 C87.5609756,90.6707317 95.9756098,89.0243902 104.695122,87.7439024 Z M49.5121951,164.085366 C27.9268293,154.878049 13.9634146,142.804878 13.9634146,133.231707 C13.9634146,123.658537 27.9268293,111.52439 49.5121951,102.378049 C54.7560976,100.121951 60.4878049,98.1097561 66.402439,96.2195122 C69.8780488,108.170732 74.4512195,120.609756 80.1219512,133.353659 C74.5121951,146.036585 70,158.414634 66.5853659,170.304878 C60.5487805,168.414634 54.8170732,166.341463 49.5121951,164.085366 Z M82.3170732,251.219512 C74.0243902,246.463415 70.4268293,228.353659 73.2317073,205.060976 C73.902439,199.329268 75,193.292683 76.3414634,187.134146 C88.2926829,190.060976 101.341463,192.317073 115.060976,193.780488 C123.292683,205.060976 131.829268,215.304878 140.426829,224.268293 C120.54878,242.743902 101.890244,252.865854 89.2073171,252.865854 C86.4634146,252.804878 84.1463415,252.256098 82.3170732,251.219512 Z M226.95122,204.756098 C229.817073,228.04878 226.280488,246.158537 218.04878,250.97561 C216.219512,252.073171 213.841463,252.560976 211.036585,252.560976 C198.414634,252.560976 179.695122,242.5 159.817073,224.146341 C168.353659,215.182927 176.890244,205 185,193.719512 C198.780488,192.256098 211.829268,190 223.780488,187.012195 C225.182927,193.170732 226.280488,199.085366 226.95122,204.756098 Z M250.426829,164.085366 C245.182927,166.341463 239.45122,168.353659 233.536585,170.243902 C230.060976,158.292683 225.487805,145.853659 219.817073,133.109756 C225.426829,120.426829 229.939024,108.04878 233.353659,96.1585366 C239.390244,98.0487805 245.121951,100.121951 250.487805,102.378049 C272.073171,111.585366 286.036585,123.658537 286.036585,133.231707 C285.97561,142.804878 272.012195,154.939024 250.426829,164.085366 Z"></path><circle id="Oval" cx="149.939024" cy="133.231707" r="27.8658537"></circle></g></svg>
package/src/cli/fixtures/rectangle.svg ADDED
@@ -0,0 +1 @@
1
+ <svg height="50" viewBox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg"><path d="m.5.5h49v49h-49z" fill="rgba(216, 216, 216, 0.5)" fill-rule="evenodd" stroke="rgba(151, 151, 151, 1)"/></svg>
package/src/cli/getAssets.js CHANGED
@@ -1,7 +1,6 @@
1
1
  const Server = require('metro/src/Server');
2
2
  const { loadConfig } = require('metro-config');
3
3
  const output = require('metro/src/shared/output/bundle');
4
- const path = require('path');
5
4
 
6
5
  async function getAssets(options) {
7
6
  const args = {
package/src/cli/readSvgAsset.js CHANGED
@@ -5,7 +5,7 @@ const readSvgAsset = (path, currentColor) =>
5
5
  .readFileSync(path)
6
6
  .toString()
7
7
  .replace(
8
- /\s(fill|stroke|stop-color|flood-color|lighting-color)=["']current["']/g,
8
+ /\s(fill|stroke|stop-color|flood-color|lighting-color)=["']currentColor["']/g,
9
9
  (_, attribute) => ` ${attribute}="${currentColor}"`
10
10
  );
11
11
 
package/src/cli/readSvgAsset.spec.js ADDED
@@ -0,0 +1,12 @@
1
+ const path = require('path');
2
+ const readSvgAsset = require('./readSvgAsset');
3
+
4
+ describe('readSvgAsset', () => {
5
+ it('replaces fill="current" with supplied currentColor', () => {
6
+ const svg = readSvgAsset(
7
+ path.join(__dirname, 'fixtures', 'current-color.svg'),
8
+ 'red'
9
+ );
10
+ expect(svg).toContain('fill="red"');
11
+ });
12
+ });
package/src/getResourceName.spec.js ADDED
@@ -0,0 +1,25 @@
1
+ const getResourceName = require('./getResourceName');
2
+
3
+ describe('getResourceName', () => {
4
+ it('replaces unsafe characters with _', () => {
5
+ expect(
6
+ getResourceName({ name: 'spaces and - dashes', hash: 'abc' })
7
+ ).toEqual(expect.stringMatching(/^spaces_and_dashes/));
8
+ });
9
+
10
+ it('returns lower case string', () => {
11
+ expect(getResourceName({ name: 'Snel Hest', hash: 'abc' })).toEqual(
12
+ expect.stringMatching(/^snel_hest/)
13
+ );
14
+ });
15
+
16
+ it('appends hash', () => {
17
+ expect(getResourceName({ name: 'lol', hash: 'abc' })).toEqual(
18
+ expect.stringMatching(/_abc$/)
19
+ );
20
+ });
21
+
22
+ it('has the pattern of name_svg_hash', () => {
23
+ expect(getResourceName({ name: 'lol', hash: 'abc' })).toBe('lol_svg_abc');
24
+ });
25
+ });