Code Monkey home page Code Monkey logo

react-svg-unique-id's Introduction

react-svg-unique-id

styled with prettier Greenkeeper badge Build Status AppVeyor Coveralls Dev Dependencies FOSSA Status

SVG processors like SVGO optimize SVG ids which often results in duplicated ids across multiple SVGs. This library tries to fix that by replacing all children ids and id references (#id, url(#id)) in SVG tags with unique generated ids like ___SVG_ID__10__0___.

How to install

yarn add react-svg-unique-id
# or
npm install react-svg-unique-id

Usage

import * as React from 'react'
import { SVGUniqueID } from 'react-svg-unique-id'

export const SVG1 = () => (
  <SVGUniqueID>
    <svg width="100%" height="100%" viewBox="0 0 60 64">
      <defs>
        <linearGradient id="prefix__bga" /> // prefix__bga => ___SVG_ID__0__0___
      </defs>
      <g fillRule="nonzero" fill="none">
        <use xlinkHref="#prefix__bga" /> // #prefix__bga => #___SVG_ID__0__0___
        <path fill="url(#prefix__bga)" /> // url(#prefix__bga) => "url(#___SVG_ID__0__0___)
      </g>
    </svg>
  </SVGUniqueID>
)

export const SVG2 = () => (
  <SVGUniqueID>
    <svg width="100%" height="100%" viewBox="0 0 60 64">
      <defs>
        <linearGradient id="prefix__bga" /> // prefix__bga => ___SVG_ID__1__0___
      </defs>
      <g fillRule="nonzero" fill="none">
        <use xlinkHref="#prefix__bga" /> // #prefix__bga => #___SVG_ID__1__0___
        <path fill="url(#prefix__bga)" /> // url(#prefix__bga) => url(#___SVG_ID__1__0___)
      </g>
    </svg>
  </SVGUniqueID>
)

If both of these SVGs were not wrapped in SVGUniqueID component there would be an id collision since two html elements would have prefix__bga as thier id.

License

FOSSA Status

react-svg-unique-id's People

Contributors

dependabot-preview[bot] avatar elderapo avatar fossabot avatar greenkeeper[bot] avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

fossabot macdue vvruspat pspinc varb manojpudasaini

react-svg-unique-id's Issues

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.8.20 to 16.8.21.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.9.2 to 1.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
Release Notes for v1.9.3

2019-04-10

Bug Fixes

  • Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

Pull Requests

  • #2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)
Commits

The new version differs by 3 commits.

  • 516a06d 1.9.3
  • a5526ea Update changelog
  • c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[Bug] Doesn't work with imported SVGs

Hi,

I'm having trouble getting the plugin to work with imported SVGs e.g.

import Logo from './images/logo.svg';

However it works when the SVG is inlined.

You can view a demo of the problem here:

Edit react-svg-unique-id

An in-range update of @types/node is breaking the build 🚨

The devDependency @types/node was updated from 11.10.0 to 11.10.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

URL ID fixing broken for the ids #url, #ur, #rl, #u, #r, #l

Found this issue with some of my SVGs. Your id replacement code both fixPropWithUrl, and getHookedXlinkHref won't work with any of these ids: #url, #ur, #rl, #u, #r, #l.

This is because you just replace the old id with the new id in the prop:

return prop.replace(id, fixedId)

When my id is #l (so the prop is url(#l)) that results in something like ur___SVG_ID__2__10___(#l)

A simple fix would be to do

return `url(#${fixedId})`

Instead

An in-range update of @commitlint/cli is breaking the build 🚨

The devDependency @commitlint/cli was updated from 7.5.2 to 7.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@commitlint/cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
  • ✅ continuous-integration/travis-ci/push: The Travis CI build passed (Details).
  • ✅ coverage/coveralls: First build on greenkeeper/@commitlint/cli-7.6.0 at 100.0% (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.8.24 to 16.8.25.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ✅ continuous-integration/appveyor/branch: AppVeyor build succeeded (Details).
  • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of core-js is breaking the build 🚨

The dependency core-js was updated from 3.4.6 to 3.4.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

core-js is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
Release Notes for 3.4.7 - 2019.12.03
  • Fixed an NPM publishing issue
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.7.18 to 16.7.19.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

An in-range update of @types/jest is breaking the build 🚨

The devDependency @types/jest was updated from 24.0.1 to 24.0.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.14.2 to 1.14.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
  • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).
Release Notes for v1.14.3

2019-06-06

Bug Fixes

  • Generate correct external imports when importing from a directory that would be above the root of the current working directory (#2902)

Pull Requests

Commits

The new version differs by 4 commits.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Support for React ^18

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.6.3" from [email protected]
npm ERR! node_modules/react-svg-unique-id
npm ERR! react-svg-unique-id@"^1.3.3" from the root project

An in-range update of @types/node is breaking the build 🚨

The devDependency @types/node was updated from 12.7.0 to 12.7.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ✅ continuous-integration/appveyor/branch: AppVeyor build succeeded (Details).
  • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.8.1 to 16.8.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @types/react-test-renderer is breaking the build 🚨

The devDependency @types/react-test-renderer was updated from 16.8.0 to 16.8.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react-test-renderer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @types/node is breaking the build 🚨

The devDependency @types/node was updated from 11.13.4 to 11.13.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.8.16 to 16.8.17.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build is in progress (Details).
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.7.7 to 16.7.8.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of react-children-utilities is breaking the build 🚨

The dependency react-children-utilities was updated from 1.1.0 to 1.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-children-utilities is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build is in progress (Details).
  • ❌ continuous-integration/appveyor/branch: AppVeyor build failed (Details).
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.