Skip to content

Commit

Permalink
Fixed SVG-loader error caused by Badge kit (#2244)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nidaqg
nidaqg authored Jan 10, 2023
1 parent b06716b commit 94d3166
Show file tree
Hide file tree
Showing 3 changed files with 396 additions and 2 deletions.
7 changes: 5 additions & 2 deletions playbook/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import React from 'react'
import classnames from 'classnames'
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'
import Veteran from './badges/veteran.jsx';
import MillionDollar from './badges/million-dollar.jsx';


type UserBadgeProps = {
aria?: object,
Expand All @@ -23,7 +26,7 @@ const UserBadge = (props: UserBadgeProps) => {
size = 'md',
} = props

const image = require(`./badges/${badge}.svg`)
const image = badge === "million-dollar" ? <MillionDollar /> : <Veteran />
const ariaProps = buildAriaProps(aria)
const dataProps = buildDataProps(data)
const classes = classnames(
Expand All @@ -40,7 +43,7 @@ const UserBadge = (props: UserBadgeProps) => {
id={id}
>
<div className="pb_user_badge_wrapper">
<img src={image} />
{image}
</div>
</div>
)
Expand Down
363 changes: 363 additions & 0 deletions playbook/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,363 @@
import * as React from "react"

const MillionDollar = (props) => (
<svg
style={{
enableBackground: "new 0 0 242.9 242.9",
}}
viewBox="0 0 242.9 242.9"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<circle cx={121.5}
cy={121.5}
r={121.5}
/>
<linearGradient
gradientUnits="userSpaceOnUse"
id="a"
x1={42.483}
x2={200.309}
y1={35.645}
y2={35.645}
>
<stop
offset={0}
style={{
stopColor: "#e6b711",
}}
/>
<stop
offset={0.128}
style={{
stopColor: "#eac23c",
}}
/>
<stop
offset={0.278}
style={{
stopColor: "#ec6",
}}
/>
<stop
offset={0.413}
style={{
stopColor: "#f1d485",
}}
/>
<stop
offset={0.527}
style={{
stopColor: "#f2d998",
}}
/>
<stop
offset={0.607}
style={{
stopColor: "#f3db9f",
}}
/>
<stop
offset={1}
style={{
stopColor: "#e6b711",
}}
/>
</linearGradient>
<path
d="M56.4 53.8c16.9-16.2 39.8-26.2 65-26.2 25.2 0 48.1 10 64.9 26.2h14c-19.1-22.2-47.4-36.3-78.9-36.3-31.5 0-59.8 14.1-78.9 36.3h13.9z"
style={{
fill: "url(#a)",
}}
/>
<linearGradient
gradientUnits="userSpaceOnUse"
id="b"
x1={17.407}
x2={44.897}
y1={132.179}
y2={132.179}
>
<stop
offset={0}
style={{
stopColor: "#e6b711",
}}
/>
<stop
offset={0.128}
style={{
stopColor: "#eac23c",
}}
/>
<stop
offset={0.278}
style={{
stopColor: "#ec6",
}}
/>
<stop
offset={0.413}
style={{
stopColor: "#f1d485",
}}
/>
<stop
offset={0.527}
style={{
stopColor: "#f2d998",
}}
/>
<stop
offset={0.607}
style={{
stopColor: "#f3db9f",
}}
/>
<stop
offset={1}
style={{
stopColor: "#e6b711",
}}
/>
</linearGradient>
<path
d="M44.9 175.7c-10.9-15.3-17.3-34-17.3-54.2 0-14.1 3.1-27.5 8.8-39.5H25.3c-5 12.2-7.8 25.5-7.8 39.5 0 22.7 7.3 43.8 19.8 60.9l7.6-6.7z"
style={{
fill: "url(#b)",
}}
/>
<linearGradient
gradientUnits="userSpaceOnUse"
id="c"
x1={52.914}
x2={189.715}
y1={212.573}
y2={212.573}
>
<stop
offset={0}
style={{
stopColor: "#e6b711",
}}
/>
<stop
offset={0.128}
style={{
stopColor: "#eac23c",
}}
/>
<stop
offset={0.278}
style={{
stopColor: "#ec6",
}}
/>
<stop
offset={0.413}
style={{
stopColor: "#f1d485",
}}
/>
<stop
offset={0.527}
style={{
stopColor: "#f2d998",
}}
/>
<stop
offset={0.607}
style={{
stopColor: "#f3db9f",
}}
/>
<stop
offset={1}
style={{
stopColor: "#e6b711",
}}
/>
</linearGradient>
<path
d="M173 199.8c-14.8 9.8-32.5 15.5-51.6 15.5s-37-5.8-51.8-15.6H52.9c18.3 16.1 42.3 25.8 68.5 25.8 26.1 0 50-9.7 68.3-25.7H173z"
style={{
fill: "url(#c)",
}}
/>
<linearGradient
gradientUnits="userSpaceOnUse"
id="d"
x1={31.123}
x2={207.766}
y1={136.159}
y2={136.159}
>
<stop
offset={0}
style={{
stopColor: "#e6b711",
}}
/>
<stop
offset={0.128}
style={{
stopColor: "#eac23c",
}}
/>
<stop
offset={0.278}
style={{
stopColor: "#ec6",
}}
/>
<stop
offset={0.413}
style={{
stopColor: "#f1d485",
}}
/>
<stop
offset={0.527}
style={{
stopColor: "#f2d998",
}}
/>
<stop
offset={0.607}
style={{
stopColor: "#f3db9f",
}}
/>
<stop
offset={1}
style={{
stopColor: "#e6b711",
}}
/>
</linearGradient>
<path
d="M139.2 193v-1.8c5-.4 10.2-.5 13.4-5 3.8-5.2 3.2-15.4 3.2-21.5V78.5l-47.3 120.4L61.2 81.2v61.1c0 13.6.5 35.1 12.5 44.2 4.3 3.2 9 3.9 14.2 4.7v1.8H31.1v-1.8c1.6-.4 3.2-.7 4.8-1.1 22.6-5.7 22.9-32.4 22.9-51.1v-37.8c0-6.1.5-13.3-3.2-18.5-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6 75.4 29.9-75.4h52.3v1.8c-4.8.4-10.2.9-13.4 5-3.8 4.8-3.2 15.9-3.2 21.9v62.5c0 6.3-.7 16.1 3.2 21.5 3.2 4.3 6.2 4.7 11.2 5v1.8h-66.4z"
style={{
fill: "url(#d)",
}}
/>
<linearGradient
gradientUnits="userSpaceOnUse"
id="e"
x1={30.453}
x2={213.794}
y1={63.629}
y2={63.629}
>
<stop
offset={0}
style={{
stopColor: "#e6b711",
}}
/>
<stop
offset={0.128}
style={{
stopColor: "#eac23c",
}}
/>
<stop
offset={0.278}
style={{
stopColor: "#ec6",
}}
/>
<stop
offset={0.413}
style={{
stopColor: "#f1d485",
}}
/>
<stop
offset={0.527}
style={{
stopColor: "#f2d998",
}}
/>
<stop
offset={0.607}
style={{
stopColor: "#f3db9f",
}}
/>
<stop
offset={1}
style={{
stopColor: "#e6b711",
}}
/>
</linearGradient>
<path
d="M30.5 60.6h183.3v6.1H30.5z"
style={{
fill: "url(#e)",
}}
/>
<linearGradient
gradientUnits="userSpaceOnUse"
id="f"
x1={196.676}
x2={225.538}
y1={132.923}
y2={132.923}
>
<stop
offset={0}
style={{
stopColor: "#e6b711",
}}
/>
<stop
offset={0.128}
style={{
stopColor: "#eac23c",
}}
/>
<stop
offset={0.278}
style={{
stopColor: "#ec6",
}}
/>
<stop
offset={0.413}
style={{
stopColor: "#f1d485",
}}
/>
<stop
offset={0.527}
style={{
stopColor: "#f2d998",
}}
/>
<stop
offset={0.607}
style={{
stopColor: "#f3db9f",
}}
/>
<stop
offset={1}
style={{
stopColor: "#e6b711",
}}
/>
</linearGradient>
<path
d="M196.7 177.5c11.5-15.6 18.7-35.2 18.7-56 0-14.1-3.1-27.5-8.8-39.5h11.1c5 12.2 7.8 25.5 7.8 39.5 0 23.4-7.8 45-20.9 62.4l-7.9-6.4z"
style={{
fill: "url(#f)",
}}
/>
</svg>
)

export default MillionDollar

Loading

0 comments on commit 94d3166

Please sign in to comment.