The next-svgr from anomen

Possible to exclude a folder?

Haven’t looked at the code yet, but this would be useful.

Next 11 breaks the plugin

Next 11 now has built in image loaders that get in the way of this plugin. You can do something like this:

      cfg.module.rules[2] = {
        oneOf: [
          {
            test: /\.svg$/,
            use: ['@svgr/webpack'],
          },
          cfg.module.rules[2],
        ],
      };

Do I have it setup correctly?

Hi I've been trying to install the next-svgr package.
when trying to use it I get the following errors:

Warning: <data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTdweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTcgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU2ICg4MTU4OCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+TG91cGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iTG91cGUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cC02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9IiMxRDFEMUQiIHN0cm9rZS13aWR0aD0iMiI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSI2IiBjeT0iNiIgcj0iNiI+PC9jaXJjbGU+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMTAuNSBMMTUsMTYiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4= /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    in data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTdweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTcgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU2ICg4MTU4OCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+TG91cGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iTG91cGUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cC02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9IiMxRDFEMUQiIHN0cm9rZS13aWR0aD0iMiI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSI2IiBjeT0iNiIgcj0iNiI+PC9jaXJjbGU+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMTAuNSBMMTUsMTYiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4= (at Loupe.js:6)
    in Loupe (at Search.js:9)
    in a (at Search.js:9)
    in Link (at Search.js:8)
    in Search (at Navigation.js:13)
    in section (at Menu.js:55)
    in div (at Menu.js:54)
    in Query (at Menu.js:48)
    in Menu
    in Context.Provider
    in ConnectFunction
    in ConnectFunction (at Navigation.js:12)
    in nav (at Navigation.js:10)
    in Navigation (at pages/index.js:28)
    in div (at pages/index.js:26)
    in Index (at _app.js:21)
    in Context.Provider
    in ApolloProvider (at _app.js:20)
    in Context.Provider
    in Provider (at _app.js:19)
    in Context.Provider
    in ApolloProvider (at _app.js:18)
    in Container (at _app.js:17)
    in MyApp (at with-redux-store.js:47)
    in AppWithRedux (at with-apollo-client.js:59)
    in withApollo(App)
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
Invariant Violation: Invalid tag: data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0ivvrgltgipz4kphn2zyb3awr0ad0imtdwecigagvpz2h0psixohb4iib2awv3qm94psiwidagmtcgmtgiihzlcnnpb249ijeumsigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3zniib4bwxuczp4bgluaz0iahr0cdovl3d3dy53my5vcmcvmtk5os94bgluayi+ciagica8is0tiedlbmvyyxrvcjogu2tldgnoidu2icg4mtu4ockglsbodhrwczovl3nrzxrjac5jb20gls0+ciagica8dgl0bgu+tg91cgu8l3rpdgxlpgogicagpgrlc2m+q3jlyxrlzcb3axroifnrzxrjac48l2rlc2m+ciagica8zybpzd0itg91cguiihn0cm9rzt0ibm9uzsigc3ryb2tllxdpzhropsixiibmawxspsjub25liibmawxslxj1bgu9imv2zw5vzgqipgogicagicagidxniglkpsjhcm91cc02iib0cmfuc2zvcm09inryyw5zbgf0zsgxljawmdawmcwgms4wmdawmdapiibzdhjva2u9iimxrdfemuqiihn0cm9rzs13awr0ad0imii+ciagicagicagicagidxjaxjjbgugawq9ik92ywwiign4psi2iibjet0iniigcj0inii+pc9jaxjjbgu+ciagicagicagicagidxwyxroigq9ik05ljusmtaunsbmmtusmtyiiglkpsjmaw5lij48l3bhdgg+ciagicagicagpc9npgogicagpc9npgo8l3n2zz4=
    at invariant (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:58:15)
    at validateDangerousTag (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:2637:34)
    at ReactDOMServerRenderer.renderDOM (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:3463:5)
    at ReactDOMServerRenderer.render (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:3237:21)
    at ReactDOMServerRenderer.read (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at renderToString (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
    at render (/Users/stef/Code/kor.utrecht.nl/node_modules/next-server/dist/server/render.js:81:16)
    at renderPage (/Users/stef/Code/kor.utrecht.nl/node_modules/next-server/dist/server/render.js:230:20)
    at _callee2$ (/Users/stef/Code/kor.utrecht.nl/.next/server/static/development/pages/_document.js:931:24)
    at tryCatch (/Users/stef/Code/kor.utrecht.nl/node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (/Users/stef/Code/kor.utrecht.nl/node_modules/regenerator-runtime/runtime.js:271:22)
    at Generator.prototype.<computed> [as next] (/Users/stef/Code/kor.utrecht.nl/node_modules/regenerator-runtime/runtime.js:97:21)
    at asyncGeneratorStep (/Users/stef/Code/kor.utrecht.nl/.next/server/static/development/pages/_document.js:283:24)
    at _next (/Users/stef/Code/kor.utrecht.nl/.next/server/static/development/pages/_document.js:305:9)
    at /Users/stef/Code/kor.utrecht.nl/.next/server/static/development/pages/_document.js:312:7
    at new Promise (<anonymous>) {
  name: 'Invariant Violation',
  framesToPop: 1

My next.config.js looks like this:

const withOffline = require('next-offline')
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const sass = require('@zeit/next-sass')
const path = require('path')
const withSvgr = require("next-svgr");

module.exports = withPlugins([
  [withOffline],
  {
    webpack(config, options) {
      config.resolve.alias['components'] = path.join(__dirname, 'components')
      config.resolve.alias['static'] = path.join(__dirname, 'static')
      config.resolve.alias['images'] = path.join(__dirname, 'assets/images')
      config.resolve.alias['svg'] = path.join(__dirname, 'assets/svg')
      config.resolve.alias['assets'] = path.join(__dirname, 'assets')
      config.resolve.alias['styles'] = path.join(__dirname, 'styles')
      return config
    },
  },
  [
    sass,
    {
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: '[local]___[hash:base64:5]',
      },
    },
  ],
  [withImages],
  [withSvgr],
])

my component

import SvgIcon from './Loupe.svg'

const Loupe = () => {
  return <SvgIcon />
}

export default Loupe

Add the option to use alongside file/url loader

It would be great if this plugin added an option to use the SVGR + url-loader pattern, so that you can have imports like so:

import starUrl, { ReactComponent as Star } from './star.svg'

Would just be a matter of adding an optional extra loader on this line, as a non-breaking change.

anomen / next-svgr Goto Github PK

next-svgr's People

Contributors

Stargazers

Watchers

Forkers

next-svgr's Issues

Possible to exclude a folder?

Next 11 breaks the plugin

Do I have it setup correctly?

Add the option to use alongside file/url loader

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent