Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including riot-ss with all npm packages installed. Try it out:

var riotSs = require("riot-ss")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

riot-ss v0.0.2

Riot SVG Sprite Component

Riot.js SVG Sprite Component


npm ins riot-ss --save-dev

Import script

<script src=""></script>

Webpack or Browserify:


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'


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

Congratulation !!! Shorten and work fine now.

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


  • link link to symbol #id

  • class set class name

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free