svg-jsx-loader/utils.js

WebPack loader that converts SVG files into React Components

'use strict';

var ALLOWED_HTML_ATTRIBUTES = 'accept acceptCharset accessKey action allowFullScreen allowTransparency alt async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked classID className colSpan cols content contentEditable contextMenu controls coords crossOrigin data dateTime defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min multiple muted name noValidate open optimum pattern placeholder poster preload radioGroup readOnly rel required role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcSet start step style tabIndex target title type useMap value width wmode'.split(' ');
var ALLOWED_SVG_ATTRIBUTES = 'clipPath cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform gradientUnits markerEnd markerMid markerStart offset opacity patternContentUnits patternUnits points preserveAspectRatio r rx ry spreadMethod stopColor stopOpacity stroke strokeDasharray strokeLinecap strokeOpacity strokeWidth textAnchor transform version viewBox x1 x2 x y1 y2 y'.split(' ');

var ALLOWED_ATTRIBUTES = ALLOWED_HTML_ATTRIBUTES.concat(ALLOWED_SVG_ATTRIBUTES);
var ALLOWED_TAGS = 'circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline radialGradient rect stop svg text tspan'.toLowerCase().split(' ');

exports.camelCase = function(string) {
    return string.replace(/(?:-|_)([a-z])/g, function(g) { return g[1].toUpperCase(); });
};

exports.className = function(string) {
    var camelCase = exports.camelCase(string);

    return camelCase[0].toUpperCase() + camelCase.slice(1);
};

exports.normalizeAttributes = function(attributes) {
    if (attributes.class) {
        attributes.className = attributes.class;
        delete attributes.class;
    }

    return ALLOWED_ATTRIBUTES.reduce(function(hash, name) {
        if (attributes[name]) hash[name] = attributes[name];

        return hash;
    }, {});
};

exports.isTagAllowed = function(element) {
    return ALLOWED_TAGS.indexOf(element['#name']) !== -1;
};

exports.styleAttribute = function(string) {
    var object = string.split(/\s*;\s*/g).reduce(function(hash, keyValue) {
        var split = keyValue.split(/\s*\:\s*/);
        var key = exports.camelCase((split[0] || '').trim());
        var value = (split[1] || '').trim();

        hash[key] = value;

        return hash;
    }, {});

    return JSON.stringify(object);
};

exports.findTagById = function(id, element) {
    if (element.$ && element.$.id === id) return element;

    var children = element.$$ || [];
    return children.map(exports.findTagById.bind(null, id)).filter(Boolean).shift();
};