riot-ss

0.0.2 • Public • Published

Riot.js SVG Sprite Component

Installation

npm ins riot-ss --save-dev

Import script

<script src="riot.ss.min.js"></script>

Webpack or Browserify:

require('riot-ss')

What is the problems for use riot in svg

Original HTML <use> element usage:

<svg><use xlink:href="#symbol_id" /></svg>

In riot.js may you try:

<svg><use xlink:href="#{symbol_id}" /></svg>

!!! DOESN'T WORK WHY? Because <use> element can't dynamic change xlink:href attriabute for link symbol #id

Use svg srpite component

<ss link="{symbol_id}"></ss>
this.symbol_id = 'edit'

yield:

<svg><use xlink:href="#edit" /></svg>

Congratulation !!! Shorten and work fine now.

Note: Please without # syntax, component will add this automated.

Options

  • link link to symbol #id

  • class set class name

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.2
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.2
    0
  • 0.0.1
    0

Package Sidebar

Install

npm i riot-ss

Weekly Downloads

0

Version

0.0.2

License

MIT

Last publish

Collaborators

  • rwu823