一覧へ戻る
sionzee/rollup-plugin-inline-svg（新しいタブで開きます）
主要言語: TypeScript
Adds support for importing svg files with inline mode.
- star 数
- 12
- watcher 数
- 1
- fork 数
- 1
- issue 数
- 4
- 最終更新
- 2023/10/07
gem-hunter主要言語: 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.