|
| 1 | +#!/usr/bin/env node |
| 2 | +import { transform } from '@svgr/core'; |
| 3 | +import path from 'path'; |
| 4 | +import fs from 'fs-extra'; |
| 5 | +import { __dirname, listSvgs } from './utils.mjs'; |
| 6 | + |
| 7 | +// Path where SVGs are located |
| 8 | +const SVG_PATH = path.join( |
| 9 | + __dirname, |
| 10 | + '../node_modules/@obosbbl/grunnmuren-icons-svg/src', |
| 11 | +); |
| 12 | + |
| 13 | +// The path where we write the SVGs as React components. |
| 14 | +// The file is temporary, for pre bundling. |
| 15 | +const REACT_FILE = path.join(__dirname, '../src/index.tsx'); |
| 16 | + |
| 17 | +const files = listSvgs(SVG_PATH); |
| 18 | + |
| 19 | +// Create the React file |
| 20 | +fs.outputFileSync(REACT_FILE, ''); |
| 21 | +fs.appendFile(REACT_FILE, 'import type { SVGProps } from "react";\n'); |
| 22 | + |
| 23 | +files.forEach(async (file) => { |
| 24 | + const jsx = await toReact(file); |
| 25 | + fs.appendFile(REACT_FILE, jsx + '\n'); |
| 26 | +}); |
| 27 | + |
| 28 | +// Inline SVGs doesn't need the namespace |
| 29 | +// This is the only svgo optimization we perform, as the SVGs are already optimized |
| 30 | +const svgoConfig = { plugins: ['removeXMLNS'] }; |
| 31 | + |
| 32 | +// We write all the icons to a single file, so we modify the default template to remove all other stuff |
| 33 | +// Default template: https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/defaultTemplate.ts |
| 34 | +function reactTemplate(variables, { tpl }) { |
| 35 | + return tpl` |
| 36 | +export const ${variables.componentName} = (${variables.props}) => ( |
| 37 | + ${variables.jsx} |
| 38 | + ); |
| 39 | +`; |
| 40 | +} |
| 41 | + |
| 42 | +async function toReact(svgFilePath) { |
| 43 | + const svg = await fs.readFile(svgFilePath, 'utf-8'); |
| 44 | + |
| 45 | + const componentName = path.parse(svgFilePath).name; |
| 46 | + |
| 47 | + const jsx = await transform( |
| 48 | + svg, |
| 49 | + { |
| 50 | + plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], |
| 51 | + // Setting this to false, as it changes the height/width of the svg |
| 52 | + icon: false, |
| 53 | + svgo: true, |
| 54 | + typescript: true, |
| 55 | + svgProps: { |
| 56 | + role: 'img', |
| 57 | + // If an aria-label is not specified, the icon is automatically hidden from screen readers |
| 58 | + 'aria-hidden': '{props["aria-label"] == null}', |
| 59 | + }, |
| 60 | + svgoConfig, |
| 61 | + template: reactTemplate, |
| 62 | + }, |
| 63 | + { componentName }, |
| 64 | + ); |
| 65 | + |
| 66 | + return jsx; |
| 67 | +} |
0 commit comments