A rollup plugin JUST to transform SVG files to symobl strings, then you can freely handle them.
Webpack version: fjc0k/svg-to-symbol-loader
# Yarn
yarn add rollup-plugin-svg-to-symbol -D
# npm
npm i rollup-plugin-svg-to-symbol -D// rollup.config.js
const svgToSymbol = require('rollup-plugin-svg-to-symbol')
module.exports = {
plugins: [
svgToSymbol()
]
}// sprite.js
import add from './svg/add.svg'
import close from './svg/close.svg'
export default [
'<svg><defs>',
add,
close,
'</defs></svg>'
].join('')The default export just likes:
<svg>
<defs>
<symbol id="add">.....</symbol>
<symbol id="close">.....</symbol>
</defs>
</svg>- extractId
- Type:
({ name }) => id - Default:
({ filePath, name }) => name - Desc: Use the function to custom symbol id. The
nameis the SVG filename without the extension. e.g.
- Type:
// rollup.config.js
svgToSymbol({
extractId({ name }) {
return `icon-${name}`
}
})import add from './svg/add.svg'
// the add likes:
// <symbol id="icon-add">...</symbol>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent