gem-hunter
Language: TypeScript
Adds support for importing svg files with inline mode.
A rollup plugin for inlining svg files
pnpm install --save-dev rollup-plugin-inline-svg npm install --save-dev rollup-plugin-inline-svg yarn add --dev rollup-plugin-inline-svg
In your rollup.config.js file
import InlineSvg from 'rollup-plugin-inline-svg'; export default { // Omitted Fields plugins: [InlineSvg()], }
or more advanced configuration
import InlineSvg, {markAsRemoved} from 'rollup-plugin-inline-svg'; export default { // Omitted Fields plugins: [ InlineSvg({ forbidden: { tags: ['div', 'style:remove'], attrs: ['width', 'height'], }, include: ['src/**/*.svg'], traverse: (node: AstNode) => { if(node?.name === 'div' && node?.attrs?.['id'] !== undefined) { // remove all divs with id attributes markAsRemoved(node) // or markAsUnwrapped } }, }) ], }
Note: You can read about the options in CHANGELOG.md
import UserIcon from "@icons/user.svg" document.querySelectorAll(`.icon.user`).forEach((node) => { node.innerHTML = UserIcon; })
Note: If you are not using custom module resolution, you should append .svg to import path.
MIT, see LICENSE for more information.