Skip to content

Commit

Permalink
Fix SVGs (#53)
Browse files Browse the repository at this point in the history
* fix: Use unique id for svg clip

* fix: Fix linear gradient ids in SVGs

* fix: Remove unused svg

* fix: Revert color change used for testing
  • Loading branch information
Chef-Cheems authored Apr 7, 2021
1 parent 54702ac commit 6eeb5a7
Show file tree
Hide file tree
Showing 13 changed files with 29 additions and 57 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -529,7 +529,7 @@ it("renders ConnectModal correctly", () => {
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#clip0)"
clip-path="url(#clip-trustwallet)"
>
<path
d="M48.0048 96.0097C74.5172 96.0097 96.0097 74.5172 96.0097 48.0048C96.0097 21.4925 74.5172 0 48.0048 0C21.4925 0 0 21.4925 0 48.0048C0 74.5172 21.4925 96.0097 48.0048 96.0097Z"
Expand Down
28 changes: 0 additions & 28 deletions packages/pancake-uikit/src/components/Slider/bunnyhead-max.svg

This file was deleted.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/pancake-uikit/src/components/Svg/Icons/LogoRound.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SvgProps } from "../types";
const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 512 512" {...props}>
<circle cx="256" cy="256" r="256" fill="url(#paint0_linear)" />
<circle cx="256" cy="256" r="256" fill="url(#paint0_linear_logoround)" />
<path
fillRule="evenodd"
clipRule="evenodd"
Expand All @@ -31,7 +31,7 @@ const Icon: React.FC<SvgProps> = (props) => {
fill="#633001"
/>
<defs>
<linearGradient id="paint0_linear" x1="256" y1="0" x2="256" y2="512" gradientUnits="userSpaceOnUse">
<linearGradient id="paint0_linear_logoround" x1="256" y1="0" x2="256" y2="512" gradientUnits="userSpaceOnUse">
<stop stopColor="#54DADE" />
<stop offset="0.762157" stopColor="#24C7D6" />
</linearGradient>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SvgProps } from "../types";
const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 90 90" {...props}>
<circle cx="45" cy="45" r="45" fill="url(#paint0_linear)" />
<circle cx="45" cy="45" r="45" fill="url(#paint0_linear_pancakeround)" />
<path
fillRule="evenodd"
clipRule="evenodd"
Expand Down Expand Up @@ -66,7 +66,7 @@ const Icon: React.FC<SvgProps> = (props) => {
fillRule="evenodd"
clipRule="evenodd"
d="M25.4361 31.9044C25.4361 34.3714 27.2287 36.5809 30.0567 38.0676L28.0973 41.4614L28.0977 41.4617H28.0973V50.0509C28.0973 51.1867 29.018 52.1075 30.1538 52.1075C31.2896 52.1075 32.2104 51.1867 32.2104 50.0509V43.22L34.3184 39.5686C35.6663 39.8545 37.1133 40.0097 38.6192 40.0097C45.9 40.0097 51.8022 36.3808 51.8022 31.9044C51.8022 27.428 45.9 23.7991 38.6192 23.7991C31.3383 23.7991 25.4361 27.428 25.4361 31.9044Z"
fill="url(#paint1_linear)"
fill="url(#paint1_linear_pancakeround)"
/>
<path
fillRule="evenodd"
Expand Down Expand Up @@ -94,12 +94,12 @@ const Icon: React.FC<SvgProps> = (props) => {
fill="#633001"
/>
<defs>
<linearGradient id="paint0_linear" x1="45" y1="0" x2="45" y2="90" gradientUnits="userSpaceOnUse">
<linearGradient id="paint0_linear_pancakeround" x1="45" y1="0" x2="45" y2="90" gradientUnits="userSpaceOnUse">
<stop stopColor="#54DADE" />
<stop offset="0.762157" stopColor="#24C7D6" />
</linearGradient>
<linearGradient
id="paint1_linear"
id="paint1_linear_pancakeround"
x1="38.7618"
y1="24.0704"
x2="38.7618"
Expand Down
4 changes: 2 additions & 2 deletions packages/pancake-uikit/src/components/Svg/Icons/Pancakes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const Icon: React.FC<SvgProps> = (props) => {
fillRule="evenodd"
clipRule="evenodd"
d="M12.214 18.272C12.214 20.9856 14.0269 23.4161 16.8871 25.0513L14.9054 28.7844L14.9059 28.7847H14.9054V38.2326C14.9054 39.4819 15.8366 40.4947 16.9853 40.4947C18.134 40.4947 19.0652 39.4819 19.0652 38.2326V30.7188L21.1972 26.7024C22.5605 27.0169 24.0238 27.1876 25.5468 27.1876C32.9103 27.1876 38.8796 23.196 38.8796 18.272C38.8796 13.3481 32.9103 9.35645 25.5468 9.35645C18.1833 9.35645 12.214 13.3481 12.214 18.272Z"
fill="url(#paint0_linear)"
fill="url(#paint0_linear_pancakes)"
/>
<path
fillRule="evenodd"
Expand Down Expand Up @@ -94,7 +94,7 @@ const Icon: React.FC<SvgProps> = (props) => {
/>
<defs>
<linearGradient
id="paint0_linear"
id="paint0_linear_pancakes"
x1="25.691"
y1="9.6549"
x2="25.691"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SvgProps } from "../types";
const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 48 48" {...props}>
<g clipPath="url(#clip0)">
<g clipPath="url(#clip-pocketwatch)">
<path
fillRule="evenodd"
clipRule="evenodd"
Expand Down Expand Up @@ -90,7 +90,7 @@ const Icon: React.FC<SvgProps> = (props) => {
/>
</g>
<defs>
<clipPath id="clip0">
<clipPath id="clip-pocketwatch">
<rect width="48" height="48" fill="white" transform="matrix(-1 0 0 1 48 0)" />
</clipPath>
</defs>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SvgProps } from "../types";
const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 25 25" {...props}>
<g clipPath="url(#clip0)">
<g clipPath="url(#clip-teamplayer)">
<path
d="M15.9617 4.03476C16.5597 2.82143 15.6818 1.40061 14.2254 1.22477C13.0389 1.08149 11.9708 1.84428 11.8399 2.9285L11.3896 6.65764C11.2976 7.41951 11.899 8.11875 12.7328 8.21943C13.3889 8.29864 14.0166 7.98162 14.286 7.435L15.9617 4.03476Z"
fill="#1FC7D4"
Expand Down Expand Up @@ -122,7 +122,7 @@ const Icon: React.FC<SvgProps> = (props) => {
/>
</g>
<defs>
<clipPath id="clip0">
<clipPath id="clip-teamplayer">
<rect width="24" height="24" fill="white" transform="translate(0.5 0.5)" />
</clipPath>
</defs>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SvgProps } from "../types";
const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 48 48" {...props}>
<circle cx="24" cy="24" r="24" fill="url(#paint0_linear)" />
<circle cx="24" cy="24" r="24" fill="url(#paint0_linear_ticketround)" />
<path
d="M39.0623 18.9777C39.3983 19.3138 39.4447 19.8426 39.1721 20.232C34.1862 27.3557 28.0207 33.576 20.9413 38.6248L20.3823 39.0235C19.9723 39.3159 19.4111 39.2692 19.055 38.9132L16.5383 36.3964C18.024 34.858 18.0077 32.4065 16.4893 30.8881C14.971 29.3698 12.5194 29.3535 10.981 30.8392L8.66608 28.5242C8.22585 28.084 8.28655 27.3538 8.79343 26.9923L9.35284 26.5933C16.261 21.6665 22.2775 15.5966 27.1429 8.64507C27.4837 8.15815 28.1816 8.09702 28.6019 8.51729L30.958 10.8734C29.4778 12.4121 29.496 14.8595 31.0125 16.3759C32.5289 17.8924 34.9762 17.9105 36.515 16.4304L39.0623 18.9777Z"
fill="#DBCDF9"
Expand Down Expand Up @@ -89,7 +89,7 @@ const Icon: React.FC<SvgProps> = (props) => {
fill="#53DEE9"
/>
<defs>
<linearGradient id="paint0_linear" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
<linearGradient id="paint0_linear_ticketround" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
<stop stopColor="#54DADE" />
<stop offset="0.762157" stopColor="#24C7D6" />
</linearGradient>
Expand Down
12 changes: 6 additions & 6 deletions packages/pancake-uikit/src/components/Svg/Icons/Won.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SvgProps } from "../types";
const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 64 64" {...props}>
<g clipPath="url(#clip0)">
<g clipPath="url(#clip-won)">
<path
fillRule="evenodd"
clipRule="evenodd"
Expand Down Expand Up @@ -34,7 +34,7 @@ const Icon: React.FC<SvgProps> = (props) => {
/>
<path
d="M51.0823 29.9055C50.3505 27.1742 47.543 25.5533 44.8116 26.2851L17.6112 33.5735C14.8798 34.3053 13.2589 37.1128 13.9908 39.8441L18.546 56.8444C19.2778 59.5758 22.0853 61.1967 24.8167 60.4648L52.0171 53.1765C54.7485 52.4446 56.3694 49.6371 55.6375 46.9058L51.0823 29.9055Z"
fill="url(#paint0_linear)"
fill="url(#paint0_linear_won)"
/>
<path
fillRule="evenodd"
Expand All @@ -54,7 +54,7 @@ const Icon: React.FC<SvgProps> = (props) => {
</g>
<path
d="M54.8306 24.9448C55.3795 22.8962 54.1638 20.7906 52.1153 20.2417L17.4965 10.9657C15.448 10.4168 13.3424 11.6324 12.7935 13.681L11.8824 17.081C11.3335 19.1295 12.5492 21.2351 14.5977 21.784L49.2165 31.0601C51.265 31.609 53.3706 30.3933 53.9195 28.3448L54.8306 24.9448Z"
fill="url(#paint1_linear)"
fill="url(#paint1_linear_won)"
/>
<path
fillRule="evenodd"
Expand All @@ -74,7 +74,7 @@ const Icon: React.FC<SvgProps> = (props) => {
</g>
<defs>
<linearGradient
id="paint0_linear"
id="paint0_linear_won"
x1="31.2114"
y1="29.9293"
x2="38.4169"
Expand All @@ -85,7 +85,7 @@ const Icon: React.FC<SvgProps> = (props) => {
<stop offset="1" stopColor="#1FC7D4" />
</linearGradient>
<linearGradient
id="paint1_linear"
id="paint1_linear_won"
x1="34.8059"
y1="15.6037"
x2="31.9071"
Expand All @@ -95,7 +95,7 @@ const Icon: React.FC<SvgProps> = (props) => {
<stop stopColor="#53DEE9" />
<stop offset="1" stopColor="#1FC7D4" />
</linearGradient>
<clipPath id="clip0">
<clipPath id="clip-won">
<rect width="64" height="64" fill="white" />
</clipPath>
</defs>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { SvgProps } from "../../../components/Svg/types";
const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 96 96" {...props}>
<g clipPath="url(#clip0)">
<g clipPath="url(#clip-trustwallet)">
<path
d="M48.0048 96.0097C74.5172 96.0097 96.0097 74.5172 96.0097 48.0048C96.0097 21.4925 74.5172 0 48.0048 0C21.4925 0 0 21.4925 0 48.0048C0 74.5172 21.4925 96.0097 48.0048 96.0097Z"
fill="#3375BB"
Expand All @@ -16,7 +16,7 @@ const Icon: React.FC<SvgProps> = (props) => {
/>
</g>
<defs>
<clipPath id="clip0">
<clipPath id="clip-trustwallet">
<rect width="96" height="96" fill="white" />
</clipPath>
</defs>
Expand Down

0 comments on commit 6eeb5a7

Please sign in to comment.