airbnb / babel-plugin-inline-react-svg Goto Github PK
View Code? Open in Web Editor NEWA babel plugin that optimizes and inlines SVGs for your React Components.
License: MIT License
A babel plugin that optimizes and inlines SVGs for your React Components.
License: MIT License
Hi,
I'd like to apply convertColors: { currentColor: true } to svgs files that are under "icons" folder.
How do I achieve this using ignorePattern?
For example,
assets/images/a.svg
assets/images/icons/lock.svg
I'd like to apply currentColor: true to lock.svg file only.
I tried "/^((?!icons).)*$" in ignorePattern. However, it doesn't seem working properly.
My SVGs contain data attributes, eg. data-name
. They are converted to camel-case dataName
, which triggers React Uknown prop
warning.
Hi,
Im getting the following error when trying to build my nextjs app with the inline svg plugin:
"Module build failed: TypeError: /var/www/path/path/path/component.js: path must be a string or Buffer"
When I try the same thing in a Mac everything works fine.... only under Ubuntu do I get this error.
Any ideas?
Thanks!
Unexpected token, expected , (48:6)
46 | TooltipIcon.defaultProps = {
47 | id: '_',
> 48 | data-name: '?',
| ^
49 | xmlns: 'http://www.w3.org/2000/svg',
50 | width: '19',
Hi all,
The current v1.0.1 duplicate ids on one page.
I think the problem with svgo 0.7.2
I have tested the code with a simple SVG and it works. Apparently there is an issue my selected more complex SVG that includes imbedded Javascript in a CDATA. It gives the error message:
SyntaxError: pages/index.js: Unexpected token (1:145641)
I am unable to debug it because it give only the location and not details of the "Unexpected token". Is there a way that I can debug this.
..a bit more info though still no indication of what caused the problem
1 | import React from 'react';
| ^
2 | import NcMap from '../static/images/nc_map.svg';
3 | import Head from 'next/head';
4 | import Link from 'next/link';
Error
at transpile (/Users/.....reportSelectorServer/node_modules/babel-loader/lib/index.js:67:13)
at /Users/.....reportSelectorServer/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/Users/.....reportSelectorServer/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
@ multi ./pages?entry
at /Users/.....reportSelectorServer/node_modules/next/dist/server/build/index.js:182:21
at emitRecords.err (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:269:13)
at Compiler.emitRecords (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:368:12)
at next (/Users/.....reportSelectorServer/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/.....reportSelectorServer/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/Users/.....reportSelectorServer/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/Users/.....reportSelectorServer/node_modules/webpack/lib/Compiler.js:365:9)
[email protected]
depends on [email protected]
.
[email protected]
dies with "TypeError: Cannot read property 'toFixed' of undefined" when tries to process some icons.
babel-plugin-inline-react-svg
has an option to disable svgo processing, however, this option doesn't work for some reason.
We have preset like:
const { declare } = require("@babel/helper-plugin-utils")
module.exports = declare((api, opts) => {
api.assertVersion(7)
const development = !!(opts && opts.development)
return {
presets: [
[require.resolve("@babel/preset-env"), {...}],
[require.resolve("@babel/preset-react"), { development }],
require.resolve("@babel/preset-typescript")
],
plugins: [
require.resolve("@babel/plugin-proposal-object-rest-spread"),
require.resolve("@babel/plugin-proposal-class-properties"),
require.resolve("babel-plugin-inline-react-svg", { svgo: false }),
]
}
})
I dumped the state of state.opts
inside plugin and it is always {}
.
I guess SVGO update will fix the issue but I would appreciate if somebody knows why configuration is not recognized by plugin and what could be done to fix the issue.
A file that contains only import svg from 'foo.svg';
will be transformed to have jsx in it, but not import React from 'react';
.
It'd be nice if a file could have export { default } from 'path/to.svg';
and have that be transformed just as if it was import x from 'path/to.svg'; export default x;
.
Resolution of svg path with the code
const svgPath = resolveFrom(dirname(iconPath), path.node.source.value);
does not take into account any path aliases configured with help of babel-plugin-module-resolver
.
If we enable the cacheDirectory
option of babel-loader
changes to an icon do not trigger rebuilds of webpack π€
But changes in .jsx
, .js
, .scss
etc. files do work even if cacheDirectory
is enabled.
This would be useful in situations where svgs have already been run through an optimizer. Would you be open to a PR?
If I specify plugin config in .babelrc
it throws the error.
ERROR in ./src/pages/Application.js
Module build failed: SyntaxError: c:/dev/.../Application.js: Unexpected token (1:1)
> 1 | import React, { Component } from 'react'
| ^
{
"presets": ...,
"plugins": [
...,
["inline-react-svg", {
"svgo": false
}]
]
}
If I then use just "inline-react-svg"
in .babelrc
then it doesn't throw the error.
But in the default mode it discards half of attributes like stroke-width="2.5"
.
As far as I can tell there's no way to pass in options to SVGO. Should be fairly straight forward to pass the options into optimize.js
via the babel state object...
Happy to open a PR for this.
<svg aria-label="test" />
currently gets transformed into <SVG ariaLabel="test" />
which is incorrect - https://reactjs.org/docs/accessibility.html#wai-aria
It should be handled the same way data-*
attributes are currently and left as hyphenated, although there are currently issues with this (#33).
This worked before, all of a sudden I'm getting this syntax error. As soon as I add the SVG import, I get this:
Syntax Error: Unexpected token, expected } (1:123)
> 1 | import React from 'react';
| ^
2 | import {Link} from '../routes';
3 |
4 | import {FormattedMessage} from "react-intl";
I didn't even change anything in this file, the error just started appearing when I saved a file somewhere else. Reversing those changes also didn't help, I'm stuck with this error now.
I'm importing the svg with import IconClose from "../static/images/icons/icon-close.svg";
. Is there anything I'm doing wrong or is this a bug?
There is a security issue in js-yaml that is used by svgo that was addressed in version 1.2.2 of svgo.
An update to svgo version >= 1.2.2 is needed to fix this issue.
=== npm audit security report ===
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Moderate Denial of Service
β Package β js-yaml
β Patched in β >=3.13.0
β Dependency of β babel-plugin-inline-react-svg [dev]
β Path β babel-plugin-inline-react-svg > svgo > js-yaml
β More info β https://npmjs.com/advisories/788
β High β Code Injection
β Package β js-yaml
β Patched in β >=3.13.1
β Dependency of β babel-plugin-inline-react-svg [dev]
β Path β babel-plugin-inline-react-svg > svgo > js-yaml
β More info β https://npmjs.com/advisories/813
found 2 vulnerabilities (1 moderate, 1 high)
Hey guys, is it possible to pass functions to svg?
I need to translate some text inside svg, so I think of passing t("text") function, I know it is silly, but what are my other options?
Module parse failed: Identifier 'React' has already been declared (23:7)
Due to this commit, this plugin is not compatible with last version of https://github.com/zeit/next.js.
Workaround: using v4.0 of this plugin
Tried to import svg flags using the following code, but it will not work due to this loader / svgo
import adFlagIcon from 'svg-country-flags/svg/ad.svg';
import aeFlagIcon from 'svg-country-flags/svg/ae.svg';
import afFlagIcon from 'svg-country-flags/svg/af.svg';
import agFlagIcon from 'svg-country-flags/svg/ag.svg';
import aiFlagIcon from 'svg-country-flags/svg/ai.svg';
import alFlagIcon from 'svg-country-flags/svg/al.svg';
import amFlagIcon from 'svg-country-flags/svg/am.svg';
import anFlagIcon from 'svg-country-flags/svg/an.svg';
import aoFlagIcon from 'svg-country-flags/svg/ao.svg';
import aqFlagIcon from 'svg-country-flags/svg/aq.svg';
import arFlagIcon from 'svg-country-flags/svg/ar.svg';
import asFlagIcon from 'svg-country-flags/svg/as.svg';
import atFlagIcon from 'svg-country-flags/svg/at.svg';
import auFlagIcon from 'svg-country-flags/svg/au.svg';
import awFlagIcon from 'svg-country-flags/svg/aw.svg';
import axFlagIcon from 'svg-country-flags/svg/ax.svg';
import azFlagIcon from 'svg-country-flags/svg/az.svg';
import baFlagIcon from 'svg-country-flags/svg/ba.svg';
import bbFlagIcon from 'svg-country-flags/svg/bb.svg';
import bdFlagIcon from 'svg-country-flags/svg/bd.svg';
import beFlagIcon from 'svg-country-flags/svg/be.svg';
import bfFlagIcon from 'svg-country-flags/svg/bf.svg';
import bgFlagIcon from 'svg-country-flags/svg/bg.svg';
import bhFlagIcon from 'svg-country-flags/svg/bh.svg';
import biFlagIcon from 'svg-country-flags/svg/bi.svg';
import bjFlagIcon from 'svg-country-flags/svg/bj.svg';
import blFlagIcon from 'svg-country-flags/svg/bl.svg';
import bmFlagIcon from 'svg-country-flags/svg/bm.svg';
import bnFlagIcon from 'svg-country-flags/svg/bn.svg';
import boFlagIcon from 'svg-country-flags/svg/bo.svg';
import bqFlagIcon from 'svg-country-flags/svg/bq.svg';
import brFlagIcon from 'svg-country-flags/svg/br.svg';
import bsFlagIcon from 'svg-country-flags/svg/bs.svg';
import btFlagIcon from 'svg-country-flags/svg/bt.svg';
import bvFlagIcon from 'svg-country-flags/svg/bv.svg';
import bwFlagIcon from 'svg-country-flags/svg/bw.svg';
import byFlagIcon from 'svg-country-flags/svg/by.svg';
import bzFlagIcon from 'svg-country-flags/svg/bz.svg';
import caFlagIcon from 'svg-country-flags/svg/ca.svg';
import ccFlagIcon from 'svg-country-flags/svg/cc.svg';
import cdFlagIcon from 'svg-country-flags/svg/cd.svg';
import cfFlagIcon from 'svg-country-flags/svg/cf.svg';
import cgFlagIcon from 'svg-country-flags/svg/cg.svg';
import chFlagIcon from 'svg-country-flags/svg/ch.svg';
import ciFlagIcon from 'svg-country-flags/svg/ci.svg';
import ckFlagIcon from 'svg-country-flags/svg/ck.svg';
import clFlagIcon from 'svg-country-flags/svg/cl.svg';
import cmFlagIcon from 'svg-country-flags/svg/cm.svg';
import cnFlagIcon from 'svg-country-flags/svg/cn.svg';
import coFlagIcon from 'svg-country-flags/svg/co.svg';
import crFlagIcon from 'svg-country-flags/svg/cr.svg';
import cuFlagIcon from 'svg-country-flags/svg/cu.svg';
import cvFlagIcon from 'svg-country-flags/svg/cv.svg';
import cwFlagIcon from 'svg-country-flags/svg/cw.svg';
import cxFlagIcon from 'svg-country-flags/svg/cx.svg';
import cyFlagIcon from 'svg-country-flags/svg/cy.svg';
import czFlagIcon from 'svg-country-flags/svg/cz.svg';
import deFlagIcon from 'svg-country-flags/svg/de.svg';
import djFlagIcon from 'svg-country-flags/svg/dj.svg';
import dkFlagIcon from 'svg-country-flags/svg/dk.svg';
import dmFlagIcon from 'svg-country-flags/svg/dm.svg';
import doFlagIcon from 'svg-country-flags/svg/do.svg';
import dzFlagIcon from 'svg-country-flags/svg/dz.svg';
import ecFlagIcon from 'svg-country-flags/svg/ec.svg';
import eeFlagIcon from 'svg-country-flags/svg/ee.svg';
import egFlagIcon from 'svg-country-flags/svg/eg.svg';
import ehFlagIcon from 'svg-country-flags/svg/eh.svg';
import erFlagIcon from 'svg-country-flags/svg/er.svg';
import esFlagIcon from 'svg-country-flags/svg/es.svg';
import etFlagIcon from 'svg-country-flags/svg/et.svg';
import euFlagIcon from 'svg-country-flags/svg/eu.svg';
import fiFlagIcon from 'svg-country-flags/svg/fi.svg';
import fjFlagIcon from 'svg-country-flags/svg/fj.svg';
import fkFlagIcon from 'svg-country-flags/svg/fk.svg';
import fmFlagIcon from 'svg-country-flags/svg/fm.svg';
import foFlagIcon from 'svg-country-flags/svg/fo.svg';
import frFlagIcon from 'svg-country-flags/svg/fr.svg';
import gaFlagIcon from 'svg-country-flags/svg/ga.svg';
import gbEngFlagIcon from 'svg-country-flags/svg/gb-eng.svg';
import gbNirFlagIcon from 'svg-country-flags/svg/gb-nir.svg';
import gbSctFlagIcon from 'svg-country-flags/svg/gb-sct.svg';
import gbWlsFlagIcon from 'svg-country-flags/svg/gb-wls.svg';
import gbFlagIcon from 'svg-country-flags/svg/gb.svg';
import gdFlagIcon from 'svg-country-flags/svg/gd.svg';
import geFlagIcon from 'svg-country-flags/svg/ge.svg';
import gfFlagIcon from 'svg-country-flags/svg/gf.svg';
import ggFlagIcon from 'svg-country-flags/svg/gg.svg';
import ghFlagIcon from 'svg-country-flags/svg/gh.svg';
import giFlagIcon from 'svg-country-flags/svg/gi.svg';
import glFlagIcon from 'svg-country-flags/svg/gl.svg';
import gmFlagIcon from 'svg-country-flags/svg/gm.svg';
import gnFlagIcon from 'svg-country-flags/svg/gn.svg';
import gpFlagIcon from 'svg-country-flags/svg/gp.svg';
import gqFlagIcon from 'svg-country-flags/svg/gq.svg';
import grFlagIcon from 'svg-country-flags/svg/gr.svg';
import gsFlagIcon from 'svg-country-flags/svg/gs.svg';
import gtFlagIcon from 'svg-country-flags/svg/gt.svg';
import guFlagIcon from 'svg-country-flags/svg/gu.svg';
import gwFlagIcon from 'svg-country-flags/svg/gw.svg';
import gyFlagIcon from 'svg-country-flags/svg/gy.svg';
import hkFlagIcon from 'svg-country-flags/svg/hk.svg';
import hmFlagIcon from 'svg-country-flags/svg/hm.svg';
import hnFlagIcon from 'svg-country-flags/svg/hn.svg';
import hrFlagIcon from 'svg-country-flags/svg/hr.svg';
import htFlagIcon from 'svg-country-flags/svg/ht.svg';
import huFlagIcon from 'svg-country-flags/svg/hu.svg';
import idFlagIcon from 'svg-country-flags/svg/id.svg';
import ieFlagIcon from 'svg-country-flags/svg/ie.svg';
import ilFlagIcon from 'svg-country-flags/svg/il.svg';
import imFlagIcon from 'svg-country-flags/svg/im.svg';
import inFlagIcon from 'svg-country-flags/svg/in.svg';
import ioFlagIcon from 'svg-country-flags/svg/io.svg';
import iqFlagIcon from 'svg-country-flags/svg/iq.svg';
import irFlagIcon from 'svg-country-flags/svg/ir.svg';
import isFlagIcon from 'svg-country-flags/svg/is.svg';
import itFlagIcon from 'svg-country-flags/svg/it.svg';
import jeFlagIcon from 'svg-country-flags/svg/je.svg';
import jmFlagIcon from 'svg-country-flags/svg/jm.svg';
import joFlagIcon from 'svg-country-flags/svg/jo.svg';
import jpFlagIcon from 'svg-country-flags/svg/jp.svg';
import keFlagIcon from 'svg-country-flags/svg/ke.svg';
import kgFlagIcon from 'svg-country-flags/svg/kg.svg';
import khFlagIcon from 'svg-country-flags/svg/kh.svg';
import kiFlagIcon from 'svg-country-flags/svg/ki.svg';
import kmFlagIcon from 'svg-country-flags/svg/km.svg';
import knFlagIcon from 'svg-country-flags/svg/kn.svg';
import kpFlagIcon from 'svg-country-flags/svg/kp.svg';
import krFlagIcon from 'svg-country-flags/svg/kr.svg';
import kwFlagIcon from 'svg-country-flags/svg/kw.svg';
import kyFlagIcon from 'svg-country-flags/svg/ky.svg';
import kzFlagIcon from 'svg-country-flags/svg/kz.svg';
import laFlagIcon from 'svg-country-flags/svg/la.svg';
import lbFlagIcon from 'svg-country-flags/svg/lb.svg';
import lcFlagIcon from 'svg-country-flags/svg/lc.svg';
import liFlagIcon from 'svg-country-flags/svg/li.svg';
import lkFlagIcon from 'svg-country-flags/svg/lk.svg';
import lrFlagIcon from 'svg-country-flags/svg/lr.svg';
import lsFlagIcon from 'svg-country-flags/svg/ls.svg';
import ltFlagIcon from 'svg-country-flags/svg/lt.svg';
import luFlagIcon from 'svg-country-flags/svg/lu.svg';
import lvFlagIcon from 'svg-country-flags/svg/lv.svg';
import lyFlagIcon from 'svg-country-flags/svg/ly.svg';
import maFlagIcon from 'svg-country-flags/svg/ma.svg';
import mcFlagIcon from 'svg-country-flags/svg/mc.svg';
import mdFlagIcon from 'svg-country-flags/svg/md.svg';
import meFlagIcon from 'svg-country-flags/svg/me.svg';
import mfFlagIcon from 'svg-country-flags/svg/mf.svg';
import mgFlagIcon from 'svg-country-flags/svg/mg.svg';
import mhFlagIcon from 'svg-country-flags/svg/mh.svg';
import mkFlagIcon from 'svg-country-flags/svg/mk.svg';
import mlFlagIcon from 'svg-country-flags/svg/ml.svg';
import mmFlagIcon from 'svg-country-flags/svg/mm.svg';
import mnFlagIcon from 'svg-country-flags/svg/mn.svg';
import moFlagIcon from 'svg-country-flags/svg/mo.svg';
import mpFlagIcon from 'svg-country-flags/svg/mp.svg';
import mqFlagIcon from 'svg-country-flags/svg/mq.svg';
import mrFlagIcon from 'svg-country-flags/svg/mr.svg';
import msFlagIcon from 'svg-country-flags/svg/ms.svg';
import mtFlagIcon from 'svg-country-flags/svg/mt.svg';
import muFlagIcon from 'svg-country-flags/svg/mu.svg';
import mvFlagIcon from 'svg-country-flags/svg/mv.svg';
import mwFlagIcon from 'svg-country-flags/svg/mw.svg';
import mxFlagIcon from 'svg-country-flags/svg/mx.svg';
import myFlagIcon from 'svg-country-flags/svg/my.svg';
import mzFlagIcon from 'svg-country-flags/svg/mz.svg';
import naFlagIcon from 'svg-country-flags/svg/na.svg';
import ncFlagIcon from 'svg-country-flags/svg/nc.svg';
import neFlagIcon from 'svg-country-flags/svg/ne.svg';
import nfFlagIcon from 'svg-country-flags/svg/nf.svg';
import ngFlagIcon from 'svg-country-flags/svg/ng.svg';
import niFlagIcon from 'svg-country-flags/svg/ni.svg';
import nlFlagIcon from 'svg-country-flags/svg/nl.svg';
import noFlagIcon from 'svg-country-flags/svg/no.svg';
import npFlagIcon from 'svg-country-flags/svg/np.svg';
import nrFlagIcon from 'svg-country-flags/svg/nr.svg';
import nuFlagIcon from 'svg-country-flags/svg/nu.svg';
import nzFlagIcon from 'svg-country-flags/svg/nz.svg';
import omFlagIcon from 'svg-country-flags/svg/om.svg';
import paFlagIcon from 'svg-country-flags/svg/pa.svg';
import peFlagIcon from 'svg-country-flags/svg/pe.svg';
import pfFlagIcon from 'svg-country-flags/svg/pf.svg';
import pgFlagIcon from 'svg-country-flags/svg/pg.svg';
import phFlagIcon from 'svg-country-flags/svg/ph.svg';
import pkFlagIcon from 'svg-country-flags/svg/pk.svg';
import plFlagIcon from 'svg-country-flags/svg/pl.svg';
import pmFlagIcon from 'svg-country-flags/svg/pm.svg';
import pnFlagIcon from 'svg-country-flags/svg/pn.svg';
import prFlagIcon from 'svg-country-flags/svg/pr.svg';
import psFlagIcon from 'svg-country-flags/svg/ps.svg';
import ptFlagIcon from 'svg-country-flags/svg/pt.svg';
import pwFlagIcon from 'svg-country-flags/svg/pw.svg';
import pyFlagIcon from 'svg-country-flags/svg/py.svg';
import qaFlagIcon from 'svg-country-flags/svg/qa.svg';
import reFlagIcon from 'svg-country-flags/svg/re.svg';
import roFlagIcon from 'svg-country-flags/svg/ro.svg';
import rsFlagIcon from 'svg-country-flags/svg/rs.svg';
import ruFlagIcon from 'svg-country-flags/svg/ru.svg';
import rwFlagIcon from 'svg-country-flags/svg/rw.svg';
import saFlagIcon from 'svg-country-flags/svg/sa.svg';
import sbFlagIcon from 'svg-country-flags/svg/sb.svg';
import scFlagIcon from 'svg-country-flags/svg/sc.svg';
import sdFlagIcon from 'svg-country-flags/svg/sd.svg';
import seFlagIcon from 'svg-country-flags/svg/se.svg';
import sgFlagIcon from 'svg-country-flags/svg/sg.svg';
import shFlagIcon from 'svg-country-flags/svg/sh.svg';
import siFlagIcon from 'svg-country-flags/svg/si.svg';
import sjFlagIcon from 'svg-country-flags/svg/sj.svg';
import skFlagIcon from 'svg-country-flags/svg/sk.svg';
import slFlagIcon from 'svg-country-flags/svg/sl.svg';
import smFlagIcon from 'svg-country-flags/svg/sm.svg';
import snFlagIcon from 'svg-country-flags/svg/sn.svg';
import soFlagIcon from 'svg-country-flags/svg/so.svg';
import srFlagIcon from 'svg-country-flags/svg/sr.svg';
import ssFlagIcon from 'svg-country-flags/svg/ss.svg';
import stFlagIcon from 'svg-country-flags/svg/st.svg';
import svFlagIcon from 'svg-country-flags/svg/sv.svg';
import sxFlagIcon from 'svg-country-flags/svg/sx.svg';
import syFlagIcon from 'svg-country-flags/svg/sy.svg';
import szFlagIcon from 'svg-country-flags/svg/sz.svg';
import tcFlagIcon from 'svg-country-flags/svg/tc.svg';
import tdFlagIcon from 'svg-country-flags/svg/td.svg';
import tfFlagIcon from 'svg-country-flags/svg/tf.svg';
import tgFlagIcon from 'svg-country-flags/svg/tg.svg';
import thFlagIcon from 'svg-country-flags/svg/th.svg';
import tjFlagIcon from 'svg-country-flags/svg/tj.svg';
import tkFlagIcon from 'svg-country-flags/svg/tk.svg';
import tlFlagIcon from 'svg-country-flags/svg/tl.svg';
import tmFlagIcon from 'svg-country-flags/svg/tm.svg';
import tnFlagIcon from 'svg-country-flags/svg/tn.svg';
import toFlagIcon from 'svg-country-flags/svg/to.svg';
import trFlagIcon from 'svg-country-flags/svg/tr.svg';
import ttFlagIcon from 'svg-country-flags/svg/tt.svg';
import tvFlagIcon from 'svg-country-flags/svg/tv.svg';
import twFlagIcon from 'svg-country-flags/svg/tw.svg';
import tzFlagIcon from 'svg-country-flags/svg/tz.svg';
import uaFlagIcon from 'svg-country-flags/svg/ua.svg';
import ugFlagIcon from 'svg-country-flags/svg/ug.svg';
import umFlagIcon from 'svg-country-flags/svg/um.svg';
import usFlagIcon from 'svg-country-flags/svg/us.svg';
import uyFlagIcon from 'svg-country-flags/svg/uy.svg';
import uzFlagIcon from 'svg-country-flags/svg/uz.svg';
import vaFlagIcon from 'svg-country-flags/svg/va.svg';
import vcFlagIcon from 'svg-country-flags/svg/vc.svg';
import veFlagIcon from 'svg-country-flags/svg/ve.svg';
import vgFlagIcon from 'svg-country-flags/svg/vg.svg';
import viFlagIcon from 'svg-country-flags/svg/vi.svg';
import vnFlagIcon from 'svg-country-flags/svg/vn.svg';
import vuFlagIcon from 'svg-country-flags/svg/vu.svg';
import wfFlagIcon from 'svg-country-flags/svg/wf.svg';
import wsFlagIcon from 'svg-country-flags/svg/ws.svg';
import xkFlagIcon from 'svg-country-flags/svg/xk.svg';
import yeFlagIcon from 'svg-country-flags/svg/ye.svg';
import ytFlagIcon from 'svg-country-flags/svg/yt.svg';
import zaFlagIcon from 'svg-country-flags/svg/za.svg';
import zmFlagIcon from 'svg-country-flags/svg/zm.svg';
import zwFlagIcon from 'svg-country-flags/svg/zw.svg';
So we have a library with all our svg icons in it.
I'm looking for a way to import all these svgs dynamically and display them in our styleguide (storybook) to give a visual representation of which icons we have.
I was trying something like this but no luck:
const reqSvgs = require.context('./svgdir', true, /\.svg$/);
reqSvgs.keys().map((filename) => {
return (
<div className="icon">
{reqSvgs(filename)}
</div>
);
})
But no luck, anyone any idea how i can make this work?
Hi, I've been working to upgrade Thumbtack's design system to Babel 7. Got stuck at babel-plugin-inline-react-svg
with the error "Path must be a string. Received undefined." It failed because iconPath
was undefined:
babel-plugin-inline-react-svg/src/index.js
Lines 47 to 48 in 7ba334c
This happened because I use babel.transform(code, opts)
. Previously, Babel would set filename: "unknown"
in opts. This seems to have changed in Babel 7.
Here's a commit with a failing test case: https://github.com/danoc/babel-plugin-inline-react-svg/commit/82d475926fc6d5866f255e0b306295a84ab5c2e9. Adding filename: test/fixtures/test-import-read-file.jsx
to opts
(the second argument) fixes the test case.
I don't think this is a bug in babel-plugin-inline-react-svg
, but these changes may be helpful:
iconPath
is undefined
(before dirname(iconPath)
).filename
.Currently, the transformed component ends up looking something like this:
_extends({
xmlns: 'http://www.w3.org/2000/svg',
viewBox: '0 0 1000 1000'
}, props),
this adds the overhead of _extends
. I think it might be a better to instead move these values into defaultProps on the generated component.
I have been working on a coworker implementation that uses this plugin though I don't really know about it except my coworker use to have it working.
https://travis-ci.org/yeutech-lab/rollup-umd-documentation/jobs/403153237#L1155
This guy helped me found the error: splunk/battlecat-poll#3
Downgrade to 0.5.1
:
$ npm uninstall babel-plugin-inline-react-svg --save-dev \
&& npm install [email protected] --save-dev
I'm using this plugin with next.js, which uses babel-plugin-react-require
. It seems that the changes in 3bab74c are conflicting with that.
So now I get this:
Module build failed: TypeError: unknown: Duplicate declaration "React"
5 | import _inherits from 'babel-runtime/helpers/inherits';
6 | import React from 'react';
> 7 | import React from 'react';
| ^
There was a hotfix made recently. Can we publish a new release to npm?
My issue is that we want to use this babel transform just for icons that we want to style - inline icons that should have the same color as surrounding text, etc.
On the other hand, we'd like to use webpack's url-loader
to handle all larger "illustration" SVGs. We would rather put those in img
tags and let them be cached by the browser and not have them in our javascript bundle.
To do so, an includePattern
could be used that would only use this babel transform on (for example):
*.icon.svg
*/icons/*.svg
Thoughts? I'm about to make a PR.
I have a repro for this issue here:
https://github.com/dwjohnston/babel-inline-react-svg-issue/tree/export-issue
If I create a source file that looks like this:
export {default as CheckboxList} from "./assets/CheckboxList.svg";
export { default as ChevronLeft } from './assets/ChevronLeft.svg';
export { default as ChevronRight } from './assets/ChevronRight.svg';
I will get a lib file like this:
'use strict';
import React from 'react';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _CheckboxList = function _CheckboxList(props) {
return React.createElement(
'svg',
props,
React.createElement('path', {
clipRule: 'evenodd',
d: 'M4 3.323a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2zm16 2H4v14h16z',
fillRule: 'evenodd'
}),
React.createElement('path', {
clipRule: 'evenodd',
d: 'M11 9.323a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1zm0 7a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2h-6a1 1 0 0 1-1-1z',
fillRule: 'evenodd'
}),
React.createElement('path', {
d: 'M6 7.323h3v3H6zm0 7h3v3H6z'
})
);
};
The import statement then causing issues for other projects that are importing this code.
This plugin removes the xmlns
attribute from the top-level svg element, which is safe for inline SVGs, which is how all SVGs transformed by this plugin will end up being used. I think it makes sense to enable this plugin by default.
https://github.com/svg/svgo/blob/master/plugins/removeXMLNS.js
It appears that this plugin is unable to read certain svgs.
svg:
<svg xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 64 64" width="64pt" height="64pt">
<defs>
<clipPath id="a">
<path d="M0 0h64v64H0z"/>
</clipPath>
</defs>
<g clip-path="url(#a)">
<circle vector-effect="non-scaling-stroke" cx="898.93229167" cy="462.28035579" r="18.71964421" fill="#A4C9FF"/>
<path d="M922.005 472c.042-.648.063-1.304.063-1.965 0-13.017-8.179-23.585-18.254-23.585-10.074 0-18.253 10.568-18.253 23.585 0 .661.021 1.317.062 1.965h36.382z" fill-rule="evenodd" fill="#FFF" opacity=".5"/>
<path d="M912.377 472c.041-.648.062-1.304.062-1.965 0-13.017-8.179-23.585-18.253-23.585-10.075 0-18.254 10.568-18.254 23.585 0 .661.021 1.317.063 1.965h36.382z" fill-rule="evenodd" fill="#FFF" opacity=".5"/>
<ellipse vector-effect="non-scaling-stroke" cx="898.93229167" cy="472" rx="23" ry="5.5" fill="#FFF" opacity=".5"/>
<path d="M5.906 32c0-14.35 11.65-26 26-26s26 11.65 26 26-11.65 26-26 26-26-11.65-26-26z" fill="#A4C9FF"/>
<path d="M50.335 13.694c4.684 4.688 7.571 11.162 7.571 18.306 0 4.942-1.382 9.564-3.78 13.5H13.421c-.058-.9-.087-1.811-.087-2.73 0-18.079 11.36-32.757 25.353-32.757 4.201 0 8.165 1.323 11.648 3.681z" fill-rule="evenodd" fill="#FFF" fill-opacity=".5"/>
<path d="M13.034 14.138C8.614 18.791 5.906 25.082 5.906 32c0 4.942 1.382 9.564 3.78 13.5h40.893c.058-.9.087-1.811.087-2.73 0-18.079-11.36-32.757-25.353-32.757-4.457 0-8.648 1.489-12.279 4.125z" fill-rule="evenodd" fill="#FFF" fill-opacity=".5"/>
<path d="M56.437 40.618c-1.578 4.498-4.361 8.43-7.973 11.397-4.8.717-10.482 1.124-16.558 1.124-6.076 0-11.758-.407-16.558-1.124-3.612-2.967-6.395-6.899-7.973-11.397 5.843-1.686 14.668-2.757 24.531-2.757s18.688 1.071 24.531 2.757z" fill-rule="evenodd" fill="#FFF" fill-opacity=".5"/>
</g>
</svg>
error
TypeError: /home/adalbero/code/proyecto/prototype/frontend/landingpage/src/components/Header.tsx: Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer"
at Array.forEach (<anonymous>)
ModuleBuildError: Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
TypeError: /home/adalbero/code/proyecto/prototype/frontend/landingpage/src/components/Header.tsx: Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer"
at Object.validate (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/definitions/utils.js:131:11)
at validateField (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/validators/validate.js:24:9)
at validate (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/validators/validate.js:17:3)
at builder (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/builders/builder.js:38:27)
at ObjectProperty (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/builders/generated/index.js:390:31)
at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/babel-plugin-inline-react-svg/lib/index.js:121:33
at Array.forEach (<anonymous>)
at applyPlugin (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/babel-plugin-inline-react-svg/lib/index.js:117:43)
at PluginPass.ImportDeclaration (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/babel-plugin-inline-react-svg/lib/index.js:183:11)
at newFn (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/visitors.js:179:21)
at NodePath._call (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/path/context.js:55:20)
at NodePath.call (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/path/context.js:42:17)
at NodePath.visit (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/path/context.js:90:31)
at TraversalContext.visitQueue (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/context.js:112:16)
at TraversalContext.visitMultiple (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/context.js:79:17)
at TraversalContext.visit (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/context.js:138:19)
at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/webpack/lib/NormalModule.js:316:20
at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/babel-loader/lib/index.js:55:103
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
What we had before:
react-svg-loader (400KB(!) minified + gzipped)
webpack.config.js:
test: /\.svg$/,
use: [
'babel-loader',
{
loader: 'react-svg-loader',
options: {
svgo: {
plugins: [
{ removeTitle: false },
],
},
},
},
],
In a .jsx file we import svg's like:
import Logo from 'assets/logo.svg'; // get's it from root even though component is in subfolder
import Logo from '../assets/logo.svg'; // I tried this as well with this module (correct relative)
What I did to replace react-svg-loader
with babel-plugin-inline-react-svg
:
webpack.config.js:
test: /\.svg$/,
use: [
'babel-loader',
],
.babelrc
- "@babel/plugin-proposal-function-bind"
+ "@babel/plugin-proposal-function-bind",
+ [
+ "inline-react-svg",
+ {
+ "svgo": {
+ "plugins": [
+ {
+ "removeAttrs": { "attrs": "(data-name)" }
+ },
+ {
+ "cleanupIDs": true
+ },
+ { "removeTitle": false }
+ ]
+ }
+ }
+ ]
The result?: lots of these...:
Module build failed: Error: Cannot find module 'assets/logo.svg'
I ran into the problem with the current readme on NPM containing a bad config key (cleanupIds
instead of cleanupIDs
). Since you already fixed this on master
(502fb90) would you mind to publish the change to NPM? Thanks!
Advisories:
I verified that the latest js-yaml
is pulled in by the latest version of svgo
(https://github.com/svg/svgo/blob/master/package-lock.json#L901). This node module should also be updated to pick up the security fix.
I'm having a problem using this plugin with a UI Component lib I created which uses this plugin. I have:
UI Component Lib (mylib/src/myicon.js
):
import React from 'react';
import testIcon from './assets/testIcon.svg';
export const MyIcon = () => {
const SVGContent = testIcon;
return (
<SVGContent />
);
};
In another project (used create-react-app):
import React from 'react;
import { MyIcon } from 'mylib/src/myicon';
export const IconWrapper = () => {
return <MyIcon />;
};
I've got this plugin configured in both projects. In The UI Component Lib I use it and also have a styleguide in the same project to view each component, everything works fine. When referencing and attempting to compile in the new app, I get the following:
SyntaxError: mylib\src\myicon.js: Unexpected token:
5 | const SVGContent = testIcon;
6 |
7 | return (
> 8 | <SVGContent />
9 | );
10 | }
package.json:
"babel": {
"presets": [
"react-app"
],
"plugins": [
"inline-react-svg"
]
}
Any ideas what this may be?
Hi there.
Great plugin. However I was wondering if we can a load a SVG Sprite to use it's fragment identifiers and add a proper icon for it.
So far I wasn't able. Thought you could have a solution.
Thanks beforehand.
The SVG icons generated by tools like Sketch usually come with alphabetical IDs in html elements.
when you import multiple SVGs in the same page, the id might conflict so you don't get the correct reference for styling.
What if we could add an option to enable prefixing all IDs with filename?
Do you think the trade-off is worth it?
As a PoC, here's the repo implements this feature and used in my own projects.
will send a PR if it looks reasonable
Is there a way to apply classes in a way that's scoped to the svg instead of as global classes, using this tool? The provided SVG files from our designers all have the same global classes, so they all conflict.
Or is this just an issue we should resolve by modifying the svg by hand? It seems like we'll inevitably run into this problem again.
Edit: It appears inlineStyles
is the plugin necessary, but babel-plugin-inline-react-svg
is using an old version of svgo
which doesn't support it.
{
"plugins": [
[
"inline-react-svg",
{
"svgo": {
"plugins": [
{
"removeAttrs": { "attrs": "(data-name)" }
},
{
"cleanupIDs": true
}
]
}
}
]
]
}
this example will break the babel build with the follow error:
.babelrc" provided an invalid property of "svgo"
Is there a way to include a default className on the generated component?
First of all, thanks for your work!
Starting from Babel 7.5.2 (#10174 specifically), console.warn
ings started to appear when using this plugin.
It seems babel-plugin-inline-react-svg
should be tweaked a bit to get rid of that warning.
I'll try to find a solution, but it probably will take a lot of time for me to get familiar with the plugin and babel internals. So, if it's smth that could be done easily - I would appreciate your help.
Here I found some related links that might be helpful:
Thanks!
Hey, do you have any idea on how this plugin could support refs? Functional components don't support refs, so out of the box, it's not possible to simply write <CloseSvg ref={node => this.node = node} />
. Switching to a class component could work. Supporting some form of innerRef
property could also work. What is your opinion on the matter?
I'd like to use this babel plugin with require declarations and it doesn't seem to be working.
require('icon.svg')
I'm getting the usual error SyntaxError: Unexpected token <
that is when the plugin is not there
Hi
You might want to upgrade svgo
for the following flaw:
> $ npm audit ⬑ 10.13.0 [Β±master β]
=== npm audit security report ===
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Manual Review β
β Some vulnerabilities require your attention to resolve β
β β
β Visit https://go.npm.me/audit-guide for additional guidance β
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
βββββββββββββββββ¬βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Moderate β Denial of Service β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Package β js-yaml β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Patched in β >=3.13.0 β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Dependency of β babel-plugin-inline-react-svg [dev] β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Path β babel-plugin-inline-react-svg > svgo > js-yaml β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β More info β https://nodesecurity.io/advisories/788 β
βββββββββββββββββ΄βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
This module makes the assumption that SVGO is sync, it maybe was at some point, but with latest releases ([email protected]
), it causes optimize
to simply return undefined
and babel to crash.
I am using the plugin with create-react-app but I am facing an issue that if I replace the SVG with the same name nothing changing as the bundle chunk file remain the same which require from me to place the new SVG file with another name than the old obsolete file
It looks like this plugin transform each node of the SVG into a React element. I wonder if we can make these more performant at runtime by instead using dangerouslySetInnerHTML
for the contents of the SVG itself. This would allow us to continue passing props to the SVG element but avoid React overhead of managing props for every path
etc contained by the SVG.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.