Skip to content

Commit

Permalink
add style prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasJang
thomasJang committed May 7, 2024
1 parent 29a5895 commit 5e344a0
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/main/tmpl/files.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"fileName":"@types.ts","contents":"export interface IconyakiIcon {\n id: string;\n fileName: string;\n componentName: string;\n tags: string[];\n viewBox: string;\n svgBody: string;\n}\n\nexport interface IconyakiData {\n icons: IconyakiIcon[];\n}\n"},{"fileName":"Browser.tsx","contents":"import styled from \"@emotion/styled\";\nimport * as React from \"react\";\nimport icons from \"./data.json\";\nimport Icon from \"./IconYaki\";\n\ninterface Props {}\n\nexport default function Browser({}: Props) {\n return (\n <Container>\n <IconCardWrap>\n <IconList>\n {icons.map((icon, key) => {\n const IconPreview = Icon({\n iconStr: icon.svgBody,\n viewBox: icon.viewBox\n });\n return (\n <IconCard key={key}>\n <div className={\"tools\"}></div>\n <IconWrap>\n <IconPreview />\n </IconWrap>\n <IconMeta>{icon.componentName}</IconMeta>\n </IconCard>\n );\n })}\n </IconList>\n </IconCardWrap>\n </Container>\n );\n}\n\nconst Container = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n justify-content: stretch;\n align-items: stretch;\n flex: 1;\n overflow: hidden;\n`;\n\nconst IconCardWrap = styled.div`\n overflow: auto;\n flex: 1;\n background: #eee;\n padding: 8px;\n`;\nconst IconList = styled.div`\n display: grid;\n gap: 8px;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n`;\n\nconst IconCard = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n justify-content: stretch;\n align-items: stretch;\n border: 1px solid #ccc;\n border-radius: 8px;\n background: #fff;\n position: relative;\n\n .tools {\n position: absolute;\n top: 0;\n right: 0;\n padding: 5px;\n display: none;\n\n a {\n color: var(--txt-body);\n &:hover {\n color: var(--txt-link-hover);\n }\n }\n }\n\n &:hover {\n .tools {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n gap: 3px;\n }\n }\n`;\nconst IconWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid var(--border-color);\n font-size: 30px;\n flex: 1;\n`;\nconst IconMeta = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex: none;\n font-size: 13px;\n padding: 5px 0;\n`;\n"},{"fileName":"IconYaki.tsx","contents":"import styles from \"./iconyaki.module.css\";\n\ninterface IconYakiProps {\n iconStr: string;\n viewBox: string;\n}\n\nexport interface IconProps {\n size?: number;\n className?: string;\n role?: string;\n}\n\nconst withIconYaki = ({ iconStr, viewBox }: IconYakiProps) => {\n return function Icon({ size, className = \"iconyaki\", role = \"iconyaki\", ...rest }: IconProps) {\n return (\n <span role={role} className={`${styles.iconyaki} ${className}`} {...rest}>\n <svg\n viewBox={viewBox}\n style={{ fontSize: size }}\n strokeWidth={0}\n dangerouslySetInnerHTML={{ __html: iconStr }}\n />\n </span>\n );\n };\n};\n\nexport default withIconYaki;\n"},{"fileName":"data.json","contents":"[\n {\n \"id\": \"e98fffc3-7fbd-4655-83eb-43fd0e31a107\",\n \"fileName\": \"IconCodeSlash.tsx\",\n \"componentName\": \"IconCodeSlash\",\n \"tags\": [],\n \"viewBox\": \"0 0 24 24\",\n \"svgBody\": \"\\n <path d=\\\"M14.3071 4.02863C13.7761 3.87763 13.2089 4.18462 13.0571 4.71662L9.05711 18.7166C8.90541 19.2476 9.21361 19.8146 9.74471 19.9666C10.2757 20.1176 10.8429 19.8106 10.9947 19.2786L14.9947 5.27863C15.1464 4.74763 14.8382 4.18063 14.3071 4.02863ZM6.83841 5.02863C6.58741 5.07863 6.33531 5.20561 6.18211 5.43561L2.18211 11.4356C1.98311 11.7336 1.95921 12.1146 2.11971 12.4356L5.11971 18.4356C5.36661 18.9286 5.96941 19.1506 6.46341 18.9036C6.95741 18.6566 7.17911 18.0536 6.93211 17.5596L4.18211 12.0916L7.86971 6.55963C8.17601 6.10063 8.04791 5.46063 7.58841 5.15363C7.35861 5.00063 7.08941 4.97863 6.83841 5.02863ZM18.3384 5.05963C18.0956 4.97963 17.8354 4.96762 17.5884 5.09162C17.0944 5.33862 16.8727 5.94161 17.1197 6.43561L19.8697 11.9036L16.1821 17.4356C15.8758 17.8946 16.0039 18.5346 16.4634 18.8416C16.9229 19.1476 17.5633 19.0196 17.8697 18.5596L21.8697 12.5596C22.0687 12.2616 22.0926 11.8806 21.9321 11.5596L18.9321 5.55963C18.8087 5.31363 18.5812 5.14163 18.3384 5.05963Z\\\" fill=\\\"#2A343D\\\"/>\\n\"\n }\n]\n"},{"fileName":"iconyaki.module.css","contents":".iconyaki {\n display: inline-flex;\n align-items: center;\n color: inherit;\n font-style: normal;\n line-height: 0;\n text-align: center;\n text-transform: none;\n vertical-align: -0.125em;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n}\n\n.iconyaki svg {\n display: inline-block;\n width: 1em;\n height: 1em;\n line-height: 1;\n}\n\n.iconyaki svg path[fill=\"#000000\"], .iconyaki svg path[fill=\"black\"] {\n fill: currentColor;\n}\n\n.iconyaki svg path[stroke=\"#000000\"], .iconyaki svg path[stroke=\"black\"] {\n stroke: currentColor;\n}\n"},{"fileName":"index.tsx","contents":""}]
[{"fileName":"@types.ts","contents":"export interface IconyakiIcon {\n id: string;\n fileName: string;\n componentName: string;\n tags: string[];\n viewBox: string;\n svgBody: string;\n}\n\nexport interface IconyakiData {\n icons: IconyakiIcon[];\n}\n"},{"fileName":"Browser.tsx","contents":"import styled from \"@emotion/styled\";\nimport * as React from \"react\";\nimport icons from \"./data.json\";\nimport Icon from \"./IconYaki\";\n\ninterface Props {}\n\nexport default function Browser({}: Props) {\n return (\n <Container>\n <IconCardWrap>\n <IconList>\n {icons.map((icon, key) => {\n const IconPreview = Icon({\n iconStr: icon.svgBody,\n viewBox: icon.viewBox\n });\n return (\n <IconCard key={key}>\n <div className={\"tools\"}></div>\n <IconWrap>\n <IconPreview />\n </IconWrap>\n <IconMeta>{icon.componentName}</IconMeta>\n </IconCard>\n );\n })}\n </IconList>\n </IconCardWrap>\n </Container>\n );\n}\n\nconst Container = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n justify-content: stretch;\n align-items: stretch;\n flex: 1;\n overflow: hidden;\n`;\n\nconst IconCardWrap = styled.div`\n overflow: auto;\n flex: 1;\n background: #eee;\n padding: 8px;\n`;\nconst IconList = styled.div`\n display: grid;\n gap: 8px;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n`;\n\nconst IconCard = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n justify-content: stretch;\n align-items: stretch;\n border: 1px solid #ccc;\n border-radius: 8px;\n background: #fff;\n position: relative;\n\n .tools {\n position: absolute;\n top: 0;\n right: 0;\n padding: 5px;\n display: none;\n\n a {\n color: var(--txt-body);\n &:hover {\n color: var(--txt-link-hover);\n }\n }\n }\n\n &:hover {\n .tools {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n gap: 3px;\n }\n }\n`;\nconst IconWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid var(--border-color);\n font-size: 30px;\n flex: 1;\n`;\nconst IconMeta = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex: none;\n font-size: 13px;\n padding: 5px 0;\n`;\n"},{"fileName":"IconYaki.tsx","contents":"import React from \"react\";\nimport styles from \"./iconyaki.module.css\";\n\ninterface IconYakiProps {\n iconStr: string;\n viewBox: string;\n}\n\nexport interface IconProps {\n size?: number;\n className?: string;\n style?: React.CSSProperties;\n role?: string;\n}\n\nconst withIconYaki = ({ iconStr, viewBox }: IconYakiProps) => {\n return function Icon({ size, className = \"iconyaki\", role = \"iconyaki\", ...rest }: IconProps) {\n return (\n <span role={role} className={`${styles.iconyaki} ${className}`} {...rest}>\n <svg\n viewBox={viewBox}\n style={{ fontSize: size }}\n strokeWidth={0}\n dangerouslySetInnerHTML={{ __html: iconStr }}\n />\n </span>\n );\n };\n};\n\nexport default withIconYaki;\n"},{"fileName":"data.json","contents":"[\n {\n \"id\": \"e98fffc3-7fbd-4655-83eb-43fd0e31a107\",\n \"fileName\": \"IconCodeSlash.tsx\",\n \"componentName\": \"IconCodeSlash\",\n \"tags\": [],\n \"viewBox\": \"0 0 24 24\",\n \"svgBody\": \"\\n <path d=\\\"M14.3071 4.02863C13.7761 3.87763 13.2089 4.18462 13.0571 4.71662L9.05711 18.7166C8.90541 19.2476 9.21361 19.8146 9.74471 19.9666C10.2757 20.1176 10.8429 19.8106 10.9947 19.2786L14.9947 5.27863C15.1464 4.74763 14.8382 4.18063 14.3071 4.02863ZM6.83841 5.02863C6.58741 5.07863 6.33531 5.20561 6.18211 5.43561L2.18211 11.4356C1.98311 11.7336 1.95921 12.1146 2.11971 12.4356L5.11971 18.4356C5.36661 18.9286 5.96941 19.1506 6.46341 18.9036C6.95741 18.6566 7.17911 18.0536 6.93211 17.5596L4.18211 12.0916L7.86971 6.55963C8.17601 6.10063 8.04791 5.46063 7.58841 5.15363C7.35861 5.00063 7.08941 4.97863 6.83841 5.02863ZM18.3384 5.05963C18.0956 4.97963 17.8354 4.96762 17.5884 5.09162C17.0944 5.33862 16.8727 5.94161 17.1197 6.43561L19.8697 11.9036L16.1821 17.4356C15.8758 17.8946 16.0039 18.5346 16.4634 18.8416C16.9229 19.1476 17.5633 19.0196 17.8697 18.5596L21.8697 12.5596C22.0687 12.2616 22.0926 11.8806 21.9321 11.5596L18.9321 5.55963C18.8087 5.31363 18.5812 5.14163 18.3384 5.05963Z\\\" fill=\\\"#2A343D\\\"/>\\n\"\n }\n]\n"},{"fileName":"iconyaki.module.css","contents":".iconyaki {\n display: inline-flex;\n align-items: center;\n color: inherit;\n font-style: normal;\n line-height: 0;\n text-align: center;\n text-transform: none;\n vertical-align: -0.125em;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n}\n\n.iconyaki svg {\n display: inline-block;\n width: 1em;\n height: 1em;\n line-height: 1;\n}\n\n.iconyaki svg path[fill=\"#000000\"], .iconyaki svg path[fill=\"black\"] {\n fill: currentColor;\n}\n\n.iconyaki svg path[stroke=\"#000000\"], .iconyaki svg path[stroke=\"black\"] {\n stroke: currentColor;\n}\n"},{"fileName":"index.tsx","contents":""}]

0 comments on commit 5e344a0

Please sign in to comment.