Code Monkey home page Code Monkey logo

rollup-plugin-svgi's People

Contributors

kuzivany avatar

Stargazers

 avatar  avatar  avatar  avatar

Forkers

zimnovich

rollup-plugin-svgi's Issues

Unexpected token error when importing font-awesome SVG

First of all, thanks for publishing this package! It seems to be the only rollup plugin for SVGs that is compatible with preact. (I've tried rollup-plugin-react-svg and rollup-plugin-svg-to-jsx with aliases, to no avail)

Anyway, I was hoping to use this plugin with @fortawesome/fontawesome-free icons, but I keep running into the following error:

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Any idea what's causing it? Font Awesome SVGs seems to have compliant markup. Here's a reproduction

// index.js
import { h } from 'preact'
import GitHub from '@fortawesome/fontawesome-free/svgs/brands/github.svg'
console.log(<GitHub />)
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import svg from 'rollup-plugin-svgi'
import babel from 'rollup-plugin-babel'

export default {
  input: 'src/index.js',
  output: {
    file: `dist/bundle.js`,
    format: 'iife'
  },
  plugins: [
    resolve(),
    svg({
      options: {
        jsx: 'preact',
      }
    }),
    babel({
      exclude: 'node_modules/**'
    })
  ]
}
// .babelrc
{
  "plugins": [["@babel/transform-react-jsx", { "pragma": "h" }]]
}
// package.json
"devDependencies": {
  "@babel/core": "^7.3.4",
  "@babel/plugin-transform-react-jsx": "^7.3.0",
  "rollup": "^1.6.0",
  "rollup-plugin-babel": "^4.3.2",
  "rollup-plugin-node-resolve": "^4.0.1",
  "rollup-plugin-svgi": "^0.2.0"
},
"dependencies": {
  "@fortawesome/fontawesome-free": "^5.7.2",
  "preact": "^10.0.0-alpha.2"
}

Make options the root object

Make options the root object passed to the svgi() plugin array:

FROM

svgi({
  options: {
    jsx: 'preact'
    /* ... */
  }
})

TO

svgi({
  jsx: 'preact'
  /* ... */
})

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.