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:
Ajay Bura 2023-01-15 09:52:58 +05:30 committed by GitHub
parent 9a34daa2bc
commit 38bbc1c6f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 7 deletions

17
package-lock.json generated
View file

@ -41,6 +41,7 @@
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-wasm": "6.1.1", "@rollup/plugin-wasm": "6.1.1",
"@types/node": "18.11.18",
"@types/react": "18.0.26", "@types/react": "18.0.26",
"@types/react-dom": "18.0.9", "@types/react-dom": "18.0.9",
"@typescript-eslint/eslint-plugin": "5.46.1", "@typescript-eslint/eslint-plugin": "5.46.1",
@ -53,6 +54,7 @@
"eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.31.11", "eslint-plugin-react": "7.31.11",
"eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-react-hooks": "4.6.0",
"mini-svg-data-uri": "1.4.4",
"prettier": "2.8.1", "prettier": "2.8.1",
"sass": "1.56.2", "sass": "1.56.2",
"typescript": "4.9.4", "typescript": "4.9.4",
@ -1054,6 +1056,12 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true "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": { "node_modules/@types/prop-types": {
"version": "15.7.5", "version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@ -3768,6 +3776,15 @@
"node": ">=8.6" "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": { "node_modules/minimatch": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",

View file

@ -51,6 +51,7 @@
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-wasm": "6.1.1", "@rollup/plugin-wasm": "6.1.1",
"@types/node": "18.11.18",
"@types/react": "18.0.26", "@types/react": "18.0.26",
"@types/react-dom": "18.0.9", "@types/react-dom": "18.0.9",
"@typescript-eslint/eslint-plugin": "5.46.1", "@typescript-eslint/eslint-plugin": "5.46.1",
@ -63,6 +64,7 @@
"eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.31.11", "eslint-plugin-react": "7.31.11",
"eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-react-hooks": "4.6.0",
"mini-svg-data-uri": "1.4.4",
"prettier": "2.8.1", "prettier": "2.8.1",
"sass": "1.56.2", "sass": "1.56.2",
"typescript": "4.9.4", "typescript": "4.9.4",

View file

@ -2,20 +2,18 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './RawIcon.scss'; import './RawIcon.scss';
function RawIcon({ function RawIcon({ color, size, src, isImage }) {
color, size, src, isImage,
}) {
const style = {}; const style = {};
if (color !== null) style.backgroundColor = color; if (color !== null) style.backgroundColor = color;
if (isImage) { if (isImage) {
style.backgroundColor = 'transparent'; style.backgroundColor = 'transparent';
style.backgroundImage = `url(${src})`; style.backgroundImage = `url("${src}")`;
} else { } else {
style.WebkitMaskImage = `url(${src})`; style.WebkitMaskImage = `url("${src}")`;
style.maskImage = `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 = { RawIcon.defaultProps = {

View file

@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import { wasm } from '@rollup/plugin-wasm'; import { wasm } from '@rollup/plugin-wasm';
import { viteStaticCopy } from 'vite-plugin-static-copy'; import { viteStaticCopy } from 'vite-plugin-static-copy';
import { svgLoader } from './viteSvgLoader';
const copyFiles = { const copyFiles = {
targets: [ targets: [
@ -33,6 +34,7 @@ export default defineConfig({
}, },
plugins: [ plugins: [
viteStaticCopy(copyFiles), viteStaticCopy(copyFiles),
svgLoader(),
wasm(), wasm(),
react(), react(),
], ],

16
viteSvgLoader.ts Normal file
View 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;
},
});