https://github.com/stealjs/steal-svg

An SVG Loader for StealJS
https://github.com/stealjs/steal-svg

Last synced: 6 months ago
JSON representation

An SVG Loader for StealJS

• Host: GitHub
• URL: https://github.com/stealjs/steal-svg
• Owner: stealjs
• License: mit
• Created: 2016-12-27T17:12:32.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-04T05:47:30.000Z (almost 8 years ago)
• Last Synced: 2024-11-09T23:04:02.350Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 7
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/stealjs/steal-svg.svg?branch=master)](https://travis-ci.org/stealjs/steal-svg)

[![npm version](https://badge.fury.io/js/steal-svg.svg)](https://badge.fury.io/js/steal-coffee)

# StealJS plugin for SVG.

Steal ([StealJS](http://stealjs.com/)) is a module loader with sane defaults. Say goodbye to debugging complicated configuration steps. It supports various module formats out of the box (ES6, CommonJS, AMD), and you can even use **a combination of multiple formats!** Steal will figure it out for you.

With the _steal-svg_ plugin, Steal can bundle SVG files with your application.

## Install

```cmd

npm install steal-svg --save

```

You'll want to also update your `steal` config:

```json

{

  "steal": {

    "plugins": [

      "steal-svg"

    ]

  }

}

```

## Use

After you've installed the plugin, when you import an SVG file `steal-svg` will remove any XML-related namespaces and attributes from the svg content.  This allows you to directly use the file in templating libraries.  The original svg file remains in its original form, so it can be used in `` tags, still.

### Can-Stache Inline SVG example:

Stache is capable of inlining SVG without the need for a separate helper.  You can use any imported SVG content directly in the template using the [{{{EXPRESSION}}}](http://canjs.com/doc/can-stache.tags.unescaped.html) tag.

```handlebars



  {{{logoSvg}}}



```


### React Inline SVG example:

In your HTML page, create a `root` element and use a script tag to bring in StealJS:

```html

```

And here's an example app.js file that creates a button with an inline SVG file:

```js

// app.js:

import React from 'react';

import ReactDOM from 'react-dom';

import SVGInline from 'react-svg-inline';

import logo from './logo.svg';

// Render the DOM

ReactDOM.render(

  

    

  

  document.querySelector('[root=true]')

);

```

## License

MIT