forked from saleor/macaw-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
.svgrrc.js
110 lines (100 loc) · 2.47 KB
/
.svgrrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
const path = require("path");
function changeSvgToMaterial(jsx) {
// replace svg -> SvgIcon
jsx.openingElement.name.name = "SvgIcon";
jsx.closingElement.name.name = "SvgIcon";
// adds classes={{ root: classes.root }}
jsx.openingElement.attributes.push({
type: "JSXAttribute",
name: { type: "JSXIdentifier", name: "classes" },
value: {
type: "JSXExpressionContainer",
expression: {
type: "ObjectExpression",
properties: [
{
type: "ObjectProperty",
method: false,
computed: false,
shorthand: false,
key: {
type: "Identifier",
name: "root",
},
value: {
type: "MemberExpression",
computed: false,
optional: false,
object: {
type: "Identifier",
name: "classes",
},
property: {
type: "Identifier",
name: "root",
},
},
},
],
},
},
});
// adds {...props}
jsx.openingElement.attributes.push({
type: "JSXSpreadAttribute",
argument: {
type: "Identifier",
name: "props",
},
});
// adds ref={ref}
jsx.openingElement.attributes.push({
type: "JSXAttribute",
name: {
type: "JSXIdentifier",
name: "ref",
},
value: {
type: "JSXExpressionContainer",
expression: {
type: "Identifier",
name: "ref",
},
},
});
return jsx;
}
const template = (variables, { tpl }) => {
const componentName = variables.componentName.replace("Svg", "");
changeSvgToMaterial(variables.jsx);
return tpl`
import * as React from "react";
import SvgIcon from "@material-ui/core/SvgIcon";
import { useIconStyles } from "../styles";
import { IconProps } from "../types";
${variables.interfaces};
export const ${componentName} = React.forwardRef(
(props: IconProps, ref: React.Ref<SVGSVGElement>) => {
const classes = useIconStyles();
return (
${variables.jsx}
)
}
);`;
};
function indexTemplate(filePaths) {
const exportEntries = filePaths.map((filePath) => {
const basename = path.basename(filePath, path.extname(filePath));
return `export * from './${basename}'`;
});
return exportEntries.join("\n");
}
module.exports = {
expandProps: "end",
typescript: true,
svgo: false,
ref: true,
template,
indexTemplate,
prettier: false,
};