This package has been deprecated

Author message:

This package is no longer supported. Please refer to the published packages contained in https://github.com/SeaMonster-Studios/rescript-index

@seamonster-studios/embed-svgs

2.1.4 • Public • Published

Embed SVGs

Takes an object or array with nested objects containing links to svgs, then retreives the contents of each svg and returns a new object. The contents are broken up into two properties, svgString, and svgElements. svgString is the svg data in a string format. svgElements is an object that will contain the properties of each svg, including all paths in a paths array. The paths array also has all properties pertaining to that path, including each style matching classes assigned to it. This data can be useful when you need the svg markup or properties in order to change style properties or animate them.

Can be used in Node and Browser environments. embedSvgs is an async function, so use accordingly.

Install

yarn add embed-svgs

OR

npm install embed-svgs

Import & Usage

import embedSvgs from 'embed-svgs'
...
const dataWithEmbededSvgs = await embedSvgs(data, els, urlKey)

Parameters

  1. data:

  2. jsx: Bool. Are the svgs inteded to be used within jsx/react. If so, each path's properties will be camel cassed.

  • The data object that contains nested object(s) that match els (and it's nexted url property, urlKey).
  1. els
  • An array of strings ['icon', 'svg'], which have a property (urlKey), which is a URL to an svg.
  • Has a default value of ['icon', 'svg']
  • Example
  {
  ...
    "icon": {
      "url": ...
    }
  ...
  }
  1. urlKey
  • The key that contains the url value for an svg
  • Has a default value of url

Use case

You have a static site generator that pulls down all of your data during build. It gets this data from a CMS, where a user/client is able to upload SVGs as images (upposed to SVG markup – that's a poor user experience).

On the frontend you need the SVG markup (to change color, animate, etc.), and you're using a modern library like React and don't want to have to query the DOM for each view/page/component to get SVGs.

embedSvgs allows you to crawl all that data, fetch all the SVGs, and add an SVG property onto it's parent object. Then the SVG markup is ready for use in your components.

Readme

Keywords

Package Sidebar

Install

npm i @seamonster-studios/embed-svgs

Weekly Downloads

6

Version

2.1.4

License

MIT

Unpacked Size

260 kB

Total Files

9

Last publish

Collaborators

  • logandeancall
  • thislogancall
  • nireno
  • seamonsterwes