sionzee/rollup-plugin-inline-svg

Adds support for importing svg files with inline mode.

rollup-plugin-inline-svg's Issues

Multi-line SVG is not exported correctly

The exported SVG is exported using single quotes, but this generates invalid JavaScript code when the SVG file contains more than a single line. Backticks could be used instead, or newlines can be stripped.

rollup-plugin-inline-svg/src/index.ts

Line 18 in a95f1c9

return {code: `export default '${SvgProcessor.process(code, {...options, fileName: id})}'`, map: {mappings: ''}};

Need More Details of How to use?

@sionzee I try to integrate this in sveltekit for inline svg.
But for option part didn't get much info?
All svg brokes after using it.
Can you provide into the details for the community?

Error: Unterminated string constant (Note that you need plugins to import files that are not JavaScript)

I work in conjunction with tsdx

I'm trying to connect svg files directly with the code, but I get an error when assembling:

that's how I import a svg file:

import ArrowDownIcon from "../assets/icons/arrow-down.svg"
console.log('ArrowDownIcon', ArrowDownIcon);  //  Here I expect to see the svg file code
export { ArrowDownIcon };

What am I doing wrong?

My package.json file:

{
    "version": "0.1.0",
    "license": "MIT",
    "main": "dist/index.js",
    "typings": "dist/index.d.ts",
    "files": [
        "dist",
        "src"
    ],
    "engines": {
        "node": ">=10"
    },
    "scripts": {
        "start": "tsdx watch",
        "build": "tsdx build",
        "test": "tsdx test --passWithNoTests",
        "lint": "tsdx lint",
        "prepare": "tsdx build",
        "size": "size-limit",
        "analyze": "size-limit --why",
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build"
    },
    "peerDependencies": {
        "react": ">=16"
    },
    "husky": {
        "hooks": {
            "pre-commit": "tsdx lint"
        }
    },
    "prettier": {
        "useTabs": false,
        "tabWidth": 4,
        "printWidth": 150,
        "semi": true,
        "singleQuote": true,
        "trailingComma": "es5"
    },
    "name": "tnt-uikit-reactjs",
    "author": "lavrik acer",
    "module": "dist/tnt-uikit-reactjs.esm.js",
    "size-limit": [
        {
            "path": "dist/tnt-uikit-reactjs.cjs.production.min.js",
            "limit": "10 KB"
        },
        {
            "path": "dist/tnt-uikit-reactjs.esm.js",
            "limit": "10 KB"
        }
    ],
    "devDependencies": {
        "@babel/core": "^7.22.10",
        "@babel/preset-env": "^7.22.10",
        "@babel/preset-react": "^7.22.5",
        "@babel/preset-typescript": "^7.22.5",
        "@size-limit/preset-small-lib": "^8.2.6",
        "@storybook/addon-essentials": "^7.3.2",
        "@storybook/addon-info": "^5.3.21",
        "@storybook/addon-links": "^7.3.2",
        "@storybook/addon-styling": "^1.3.6",
        "@storybook/addons": "^7.3.2",
        "@storybook/react": "^7.3.2",
        "@storybook/react-webpack5": "^7.3.2",
        "@types/jquery": "^3.5.16",
        "@types/react": "^18.2.20",
        "@types/react-dom": "^18.2.7",
        "babel-loader": "^9.1.3",
        "husky": "^8.0.3",
        "node-sass": "^9.0.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-is": "^18.2.0",
        "rollup-plugin-inline-svg": "^3.0.3",
        "sass": "^1.66.1",
        "size-limit": "^8.2.6",
        "storybook": "^7.3.2",
        "tsdx": "^0.14.1",
        "tslib": "^2.6.2",
        "typescript": "^5.1.6"
    },
    "dependencies": {
        "@rollup/plugin-image": "^3.0.2",
        "@rollup/plugin-url": "^8.0.1",
        "@svgr/rollup": "^8.1.0",
        "autoprefixer": "^10.4.15",
        "cssnano": "^6.0.1",
        "jquery": "^3.7.0",
        "lodash-es": "^4.17.21",
        "rollup-plugin-postcss": "^4.0.2",
        "rollup-plugin-svg": "^2.0.0",
        "svg-inline-loader": "^0.8.2",
        "svg-react-loader": "^0.4.6"
    }
}

SVG validation fails when SVG contains a comment

When an SVG file contains a comment the SVG validation fails:

[!] (plugin commonjs--resolver) Error: rollup-plugin-inline-svg: file <path>.svg contains more than one root element

Sample SVG file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
  <rect width="24" height="24" />
</g>
</svg>

The parser returns:

 [
  {
    type: 'comment',
    comment: ' Generator: Adobe Illustrator 25.2.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  '
  },
  {
    type: 'tag',
    name: 'svg',
    voidElement: false,
    attrs: {
      version: '1.1',
      id: 'Layer_1',
      xmlns: 'http://www.w3.org/2000/svg',
      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
      x: '0px',
      y: '0px',
      viewBox: '0 0 24 24',
      style: 'enable-background:new 0 0 24 24;',
      'xml:space': 'preserve'
    },
    children: [ [Object], [Object], [Object] ]
  }
]

Suggested fix:

    const asts = parse(code.trim()).filter(e => e.type !== 'comment') as AstNode[]

Related: #20.

Set sensible default for include

Thanks for updating this plugin to TS.

According to the current changelog the default for include is ['*.svg']. According to the code the default is ['*.ts', '*.js']:

rollup-plugin-inline-svg/src/index.ts

Line 6 in a95f1c9

include: ['*.ts', '*.js']

I don't understand the latter default.

Just ['*.svg'] is OK, but I think ['**/*.svg'] makes more sense, otherwise only files in the root directory are processed.

SVG validation is too strict

The new SVG validation is too strict. Valid SVG is considered invalid. For example the following icon from @mdi:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-axis-arrow-info" width="24" height="24" viewBox="0 0 24 24">
    <path d="M12 2L16 6H13V13.85L19.53 17.61L21 15.03L22.5 20.5L17 21.96L18.53 19.35L12 15.58L5.47 19.35L7 21.96L1.5 20.5L3 15.03L4.47 17.61L11 13.85V6H8L12 2M21 5H19V3H21V5M22 10V12H18V10H19V8H18V6H21V10H22Z" />
</svg>

But also SVGs created by Illustrator fail:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
  ... (truncated)
</g>
</svg>

The previous version did not suffer from this issue.

SVGs not loading

Hi,

Im having a hard time getting the rollup config to bundle the SVGs. Essentially I'm trying to create an icon pack that will allow a user to select an icon and import during runtime. Is this possible using this plugin?

I have tried a lot of plugins and combinations without success.

Directory structure:
dist -> rollup files
src

• components //Vue component to import .svg and render (getIcon() -->method catch statement is always being called - Cannot read property 'set' of undefined )
  • icon.vue
• icons
  • icon types (brand, light etc)
    • icons (.svg)

Repo: https://github.com/mjmnagy/rollup-svg

I apologize if this is out of the scope of the plugin but i am lost
thanks

Invalid DOCTYPE handling

Input (from mdi icon library):

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-axis-arrow-info" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L16 6H13V13.85L19.53 17.61L21 15.03L22.5 20.5L17 21.96L18.53 19.35L12 15.58L5.47 19.35L7 21.96L1.5 20.5L3 15.03L4.47 17.61L11 13.85V6H8L12 2M21 5H19V3H21V5M22 10V12H18V10H19V8H18V6H21V10H22Z" /></svg>

Results in:

return '<!DOCTYPE svg="" PUBLIC="" SVG="" 1.1=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-axis-arrow-info" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L16 6H13V13.85L19.53 17.61L21 15.03L22.5 20.5L17 21.96L18.53 19.35L12 15.58L5.47 19.35L7 21.96L1.5 20.5L3 15.03L4.47 17.61L11 13.85V6H8L12 2M21 5H19V3H21V5M22 10V12H18V10H19V8H18V6H21V10H22Z"/></svg></!DOCTYPE>';

Note the closing DOCTYPE tag. This is invalid SVG.

Support for inlining SVG's in html files

Useful plugin, but I'm missing one critical feature - processing of HTML files and replacing all (or tagged) SVG;s in the index.html for example with their svg source XML. For example :
<img svg-inline src="/img/svg/apple.svg" style="font-size: 1.1em; margin-top: -2px;" class="current-color svg-inline--fa fa-phone fa-w-16 me-2"/>
should be replaced with it's source keeping the image attributes, like this :
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve" style="font-size: 1.1em; margin-top: -2px;" class="current-color svg-inline--fa fa-phone fa-w-16 me-2"> <path ..... /> </svg>

SVG validation still too string

This is a valid SVG which is failing validation

rollup-plugin-inline-svg: file /path/totest-table.svg is not a valid svg. The 'svg' node was not found.