Vite plugin to add svg as inline data (#1072)
* add vite plugin to add svg as inline data * Add node types package
This commit is contained in:
parent
9a34daa2bc
commit
38bbc1c6f5
5 changed files with 42 additions and 7 deletions
17
package-lock.json
generated
17
package-lock.json
generated
|
@ -41,6 +41,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-wasm": "6.1.1",
|
||||
"@types/node": "18.11.18",
|
||||
"@types/react": "18.0.26",
|
||||
"@types/react-dom": "18.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "5.46.1",
|
||||
|
@ -53,6 +54,7 @@
|
|||
"eslint-plugin-jsx-a11y": "6.6.1",
|
||||
"eslint-plugin-react": "7.31.11",
|
||||
"eslint-plugin-react-hooks": "4.6.0",
|
||||
"mini-svg-data-uri": "1.4.4",
|
||||
"prettier": "2.8.1",
|
||||
"sass": "1.56.2",
|
||||
"typescript": "4.9.4",
|
||||
|
@ -1054,6 +1056,12 @@
|
|||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "18.11.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
|
||||
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
|
||||
|
@ -3768,6 +3776,15 @@
|
|||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mini-svg-data-uri": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"mini-svg-data-uri": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
|
|
@ -51,6 +51,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-wasm": "6.1.1",
|
||||
"@types/node": "18.11.18",
|
||||
"@types/react": "18.0.26",
|
||||
"@types/react-dom": "18.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "5.46.1",
|
||||
|
@ -63,6 +64,7 @@
|
|||
"eslint-plugin-jsx-a11y": "6.6.1",
|
||||
"eslint-plugin-react": "7.31.11",
|
||||
"eslint-plugin-react-hooks": "4.6.0",
|
||||
"mini-svg-data-uri": "1.4.4",
|
||||
"prettier": "2.8.1",
|
||||
"sass": "1.56.2",
|
||||
"typescript": "4.9.4",
|
||||
|
|
|
@ -2,20 +2,18 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import './RawIcon.scss';
|
||||
|
||||
function RawIcon({
|
||||
color, size, src, isImage,
|
||||
}) {
|
||||
function RawIcon({ color, size, src, isImage }) {
|
||||
const style = {};
|
||||
if (color !== null) style.backgroundColor = color;
|
||||
if (isImage) {
|
||||
style.backgroundColor = 'transparent';
|
||||
style.backgroundImage = `url(${src})`;
|
||||
style.backgroundImage = `url("${src}")`;
|
||||
} else {
|
||||
style.WebkitMaskImage = `url(${src})`;
|
||||
style.maskImage = `url(${src})`;
|
||||
style.WebkitMaskImage = `url("${src}")`;
|
||||
style.maskImage = `url("${src}")`;
|
||||
}
|
||||
|
||||
return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
|
||||
return <span className={`ic-raw ic-raw-${size}`} style={style} />;
|
||||
}
|
||||
|
||||
RawIcon.defaultProps = {
|
||||
|
|
|
@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
|
|||
import react from '@vitejs/plugin-react';
|
||||
import { wasm } from '@rollup/plugin-wasm';
|
||||
import { viteStaticCopy } from 'vite-plugin-static-copy';
|
||||
import { svgLoader } from './viteSvgLoader';
|
||||
|
||||
const copyFiles = {
|
||||
targets: [
|
||||
|
@ -33,6 +34,7 @@ export default defineConfig({
|
|||
},
|
||||
plugins: [
|
||||
viteStaticCopy(copyFiles),
|
||||
svgLoader(),
|
||||
wasm(),
|
||||
react(),
|
||||
],
|
||||
|
|
16
viteSvgLoader.ts
Normal file
16
viteSvgLoader.ts
Normal file
|
@ -0,0 +1,16 @@
|
|||
import svgToMiniDataURI from 'mini-svg-data-uri';
|
||||
import type { Plugin } from 'rollup';
|
||||
import fs from 'fs';
|
||||
|
||||
// TODO: remove this once https://github.com/vitejs/vite/pull/2909 gets merged
|
||||
export const svgLoader = (): Plugin => ({
|
||||
name: 'vite-svg-patch-plugin',
|
||||
transform: (code, id) => {
|
||||
if (id.endsWith('.svg')) {
|
||||
const extractedSvg = fs.readFileSync(id, 'utf8');
|
||||
const datauri = svgToMiniDataURI.toSrcset(extractedSvg);
|
||||
return `export default "${datauri}"`;
|
||||
}
|
||||
return code;
|
||||
},
|
||||
});
|
Loading…
Reference in a new issue