godaddy / svgs

svgs is a compatiblity layer between svg and react-native-svg

svgs

The svgs module is compatibility layer between react-native-svg and regular react (browser) based SVG elements. This allows you to write SVG in the react and react-native using exactly the same API. Bringing your applications a step closer to writing fully isomorphic application.

The library itself is written in ES6 and comes with the correct babel transforms as dependencies so it's easy to integrate in your existing tool chains and webpack builds.

There are 2 ways in using this package, you could use svgs instead of react-native-svg which is recommended. But you could also instruct your WebPack builder to use svgs as an alias for react-native-svg.

Table of Contents

• Install
• WebPack
• API
• Example
• Accessibility
• License

Install

For regular react usage:

npm install --save svgs

For React-Native usage:

npm install --save svgs
npm install --save react-native-svg
react-native link react-native-svg

Word of caution, make sure that you install a react-native-svg version that works with your react-native version. See the react-native-svg project for a list of supported React versions.

WebPack

To use this package as alias for react-native-svg you need to update your WebPack configuration to include the following snippet:

resolve: {
  alias: {
    ...
    'react-native-svg': 'svgs',
  }
}

API

The API that we expose is exactly the same as the react-native-svg project so please visit: https://github.com/react-native-community/react-native-svg for the full API documentation. But here is a quick little overview of the available elements:

import Svg, {
  Circle,
  ClipPath,
  Defs,
  Ellipse,
  G,
  Image,
  Line,
  LinearGradient,
  Mask,
  Path,
  Pattern,
  Polygon,
  Polyline,
  RadialGradient,
  Rect,
  Stop,
  Svg,
  Symbol,
  TSpan,
  Text,
  TextPath,
  Use
} from 'svgs';

Any incompatibilities should be seen as a bug and be reported in the svgs/issue page on Github.

Example

Import all the SVG elements and make a Twitter logo.

import React, { Component } from 'react';
import Svg, { Path } from 'svgs';

class Twitter extends Component {
  render() {
    return (
      <Svg height='1208' width='1000' viewbox='0 0 1000 1208.3' preserveAspectRatio='meet'>
        <Path fill='#000' d='M0 1007.9q139.6 92.1 305.8 92.1 76.7 0 146.9-18.1 70.2-18.1 126.5-50 56.2-31.9 103.9-75.6 47.7-43.8 82.5-95.7 34.8-51.8 59.2-108.9 24.4-57.1 36.5-116.3 12-59.1 12-117.5 0-17.9-0.4-26.6 13.4-10 42.1-25.5 28.8-15.4 51-30.8 22.3-15.4 34-33.3-15.8 7.1-41.5 10-25.6 2.9-56.4 3.7-30.8 0.9-44.2 2.5 34.6-21.6 69.2-58.1 34.6-36.5 45-69.8-31.3 19.2-76.3 38.3-45 19.2-77 25.9-28-30.4-65.7-47.5-37.7-17.1-79.8-17.1-54.1 0-100.2 27.5-46 27.5-72.7 74.6-26.6 47.1-26.6 102.5 0 24.1 5 46.6-122.5-6.6-229.4-63.1-106.9-56.4-181.9-150.6-26.7 46.7-26.7 102.9 0 52.1 23.8 97.1 23.7 45 64.6 72.9-48.4-1.2-90-25.4l0 2.5q0 73.7 45.4 130.2 45.4 56.5 114.6 70.2-25 7.5-52.5 7.5-19.2 0-37.9-3.7 19.1 61.6 70.4 101.2 51.2 39.6 116.2 40.8-108.7 87.5-247.9 87.5-25.8 0-47.5-2.9z' />
      </Svg>
    );
  }
}

Accessibility

If you want Section 508 Accessibility add the title prop to the <Svg /> component like this:

<Svg title="Image Description" width="1000" height="1000" ... />

When this renders on native, you'll get your SVG wrapped in a View with an accessibilityLabel. On web, the SVG element will get two aria labels and a <title> element that are required for accessibility.

<svg role="img" aria-label="[title]" width="1000" height="1000">
  <title>Image Description</title>
  ...
</svg>

License

MIT

svgs's Issues

ClipPath not working

ClipPath not working same as react-native-svg. As soon as I apply clipPath, the component disappears while it works fine with react-native-svg.

Server rendering broken with module declaration

Since the module entry point declaration was added in v4.0 this library can't be used in a server rendering context anymore, as node will choose the module entry point which contains uncompiled JSX. If there is no particular reason to have the module export point to an uncompiled version, it should be removed or point to a compiled version

Support origin property

A react-native-svg library supports setting origin, originX and originY values. Seems like it is not supported here, but can be made using a transform-origin attribute. Setting transform-origin works fine in Chrome but not in other browsers, and not in spec: https://svgwg.org/svg2-draft/attindex.html But setting a style property transform-origin should be fine.

What do you guys think about it?

react-native-web-community support

Hi
there is a library to support react native for web in the this link
https://github.com/necolas/react-native-web
and a community of libraries which use alias in the webpack config to switch between RN and RN web
https://github.com/react-native-web-community
I hope you could join RN web community
thanks

Can we do the same to div and View as svgs do?

Hello, thanks for the svgs. Sure helped us to adopt to RN and react web at the same time.

I'm curious if we could do the same thing to div (map div to View)
as svgs map svg to Svg ?

Path onPress prop not handled

I ran into this when using:

• react v16.3.1
• react-native-svg-charts v5.2.0
• react-native-svg v6.3.1
• react-native-web v0.8.8
• svgs v3.2.1

Luckily this isn't a result of some arcane interplay between these packages.

react-native-svg supports a series of touchable props on the Path component. You can see those props in the typescript lib def in their repo. Unfortunately, onPress is not a recognized event handler on the path dom element so react will strip out the property and log an error to the console:

Warning: Unknown event handler property 'onPress'. It will be ignored.

I suspect that once you dig into this issue this will quickly open up a can or worms and require supporting a wider range of TouchableProps on a wider range of SVG dom elements.

let me know if you would like some help putting a PR together. react-native-web has a mixin that adds support for onPress event handlers do dom elements ... the work is pretty extensive. unfortunately, it isn't yet packaged up as an independent module.

svgs component cannot receive the style created by StyleSheet in web

Overview

svgs's component can't receive style created by StyleSheet.create() in web.

Details

I'm developing an application with react-native and react-native-web.
react-native-web is porting react-native's implementation as much as possible.
So, StyleSheet.create() return object style key and id like following.

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

console.log(styles.container) // -> 73 (style id)

react-native-web resolve all styles in it's components.
https://github.com/necolas/react-native-web/blob/9872c9716973870ab3cc129215a17fc6cbb1b112/packages/react-native-web/src/exports/StyleSheet/ReactNativeStyleResolver.js

Actual Behavior

Throws Error of following and nothing to render.

Uncaught Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Expected Behavior

Correctly svg rendered.

Reproduction repository

https://github.com/sasurau4/sample-rnweb/tree/repro/svgs-issue

---

I think this is edge case. But if this issue fixed, svgs fully compatible to the react-native-svg.

Thanks in advance.

Mask component missing

Mask component is not available in the library yet. Any plans for adding it ?

Can't make it work with create-react-app

Hi there,

This is the missing piece of react-native-web. Thanks you so much for creating it!

Now, I'm facing the following problem. I'm trying to use the library with a fresh project generated with create-react-app but I'm getting the following error.

Error in ./~/svgs/index.js
Module parse failed: [...]/svgs/index.js Unexpected token (67:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (67:9)
 @ ./src/App.js 22:12-27

How can I fix this?

Thanks again,
JM

Is svgs still needed since react-native-svg supports web?

We've been mapping any external usages of svgs to react-native-svg and using extension resolution to use .web extensions first. We haven't seen any issues re-mapping svgs back to react-native-svg but wanted to double check if there is a reason why that's not a good idea.

Thank you!

SvgXml component missing

SvgXml component is missing in the library. Here is the SvgXml part in react-native-svg's README.md. Are there any plans to add it?

let me know if I can be of any help with that.

Add Travis.CI integration

Setup Travis-CI to automatically run the test suite for PRs.

No SvgUri or SvgCssUri Support

There is currently no support for loading Svg from a remote URI as described here: https://github.com/react-native-community/react-native-svg#use-with-content-loaded-from-uri

both these components can be easily abstracted with a regular img, I'll try to submit a PR later today

BUG: refs cannot be applied because of stateless functions.

Problem:

You can use ref's with stateless functions. This means that non of the svgs components can have a ref assigned to them.

Solution:

Change all stateless functions to class's.

A problem occurred evaluating project ':react-native-svg'. > Could not find method implementation() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

A problem occurred evaluating project ':react-native-svg'.

Could not find method implementation() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

Setting style property

I just browsed a source code and I can see the you create a new style object and just set couple of values there. However, it may be really useful to have ability to set other maybe web specific style properties.

For example, using transition or user-select or some other style properties which are not supported on a react native, but can be super useful on web. This feature would not break any compatibility with react-native-svg.

Error: Cannot find module 'svgs' from 'js/components/Island.js'

When I used "svgs": ^4.0.0 in my package.json, I got the entitled error.

By switching back to ^3.2.1, this resolved the issue...

TypeScript definitions?

Hi! Is there roadmap to support typescript? Some props seem to be complaining.

Text x,y properties cause warnings in React

Using React 16 (maybe with React 15 as well - I did not try) I get the following warning in the debug console:

Warning: Failed prop type: Invalid prop 'x' of type 'number' supplied to 'Text', expected 'string'.

In the code I can see that you declare the properties' types correctly:

Text.propTypes = {
  x: PropTypes.string,

but you pass the values as is without converting them to strings:

  return <text { ...prepare(rest) } { ...{ x, y, dx, dy, rotate } } />;

Shouldn't this be something like:

  return <text { ...prepare(rest) } { ...{ x !== undefined ? x.toString() : x, [etc.] } } />;

Thanks for the module! Nice work!

package.json listing dev dependencies as regular dependencies

Still new to JS packages, but I tried adding your package to one of the projects I'm working on and got a bunch of dependencies installed that I did not expect because the following packages are listed as regular dependencies in package.json

"babel-preset-es2015": "6.22.x",
"babel-preset-react": "6.23.x",
"babelify": "7.3.x",

I can submit a PR to move those to dev dependencies, but wanted to verify I wasn't missing something first.