Pass SVG in as a variable

I want to be able to pass an svg name into this react component and call it from the render function. Is there currently a way to do this?

Something like this:

var React   = require("react");
var Icon = require("babel!svg-react!");

var SVG = React.createClass({
    render: function() {
        return <Icon path="../node_modules/logo.svg" />
    }
});

[jhamlet]

The issue you describe seems to be a limitation of webpack.

If you wish to reduce the ‘path’ that consumers of these svgs need to know about, can I suggest trying it this way:

// file: src/icons.js
module.exports = {
    Foo: require('babel!svg-react!../files/foo.svg'),
    Bar: require('babel!svg-react!../files/bar.svg'),
    Baz: require('babel!svg-react!../files/baz.svg'),
    // and so on ...
};

Then consumers can use it like so:

// file: index.js
var React = require('react');
var IconFoo = require('./src/icons').Foo;

module.exports = React.createClass({
    render: function () {
        return <IconFoo className="foo" />;
    }
});

Alternatively, you can try the following.

This uses require.context in webpack to do something more dynamic.

// file: src/icons.js
var React = require('react');
var context = require.context('babel!svg-react!../files', false, /\.svg$/);

module.exports = React.createClass({
    render: function () {
        // We use './' since context is relative to '../files'
        var path = './' + this.props.iconName + '.svg';

        var element;

        try {
            element = React.createElement(context(path), this.props);
        }
        catch (error) {
            element = <span {...this.props} className='missingIcon' />;
        }

        return element;
    }
});

Then other’s can do the following:

// file: index.js
var React = require('react');
var Icon = require('./src/icons');

module.exports = React.createClass({
    render: function () {
        return <Icon iconName='foo' />;
    }
});

[tonydiaz]

Thanks. The use-case is a reusable component so when an SVG is loaded the caller will only need to call the name of the SVG and not need to fill out the entire path each time.

I have a problem concatenating a string within a require statement. Do you think it is a async issue?

Caller

var SVG = require("./svg.js")
var Comp = React.createClass({
    render() { 
      //Load some stuff
      <SVG name="play.svg" className="button" />
    }

svg.js

var svgPath = "../files/svg/";

var SVG = React.createClass({
    render() {
        //I'm unable to get the line below to work. It seems the `require` doesn't like it 
        //when I concatenate a string
        var Icon = require("babel!svg-react!" + svgPath + this.props.filename);
        return <Icon className={this.props.className}/>
    }
});