@marigold/icons 0.0.2 → 0.3.0

package/src/ui/CircleUnchecked.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const CircleUnchecked = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M5.62507 12C5.62507 15.5157 8.48442 18.375 12.0001 18.375C15.5157 18.375 18.375 15.5157 18.375 12C18.375 8.48438 15.5157 5.62502 12.0001 5.62502C8.48442 5.62502 5.62507 8.48438 5.62507 12ZM12 21.0001C7.03127 21.0001 3 16.9688 3 12C3 7.03127 7.03127 3 12 3C16.9687 3 21 7.03127 21 12C21 16.9688 16.9687 21.0001 12 21.0001Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/Close.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Close = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M19.8281 5.74868L18.2513 4.17188L12 10.4232L5.74868 4.17188L4.17188 5.74868L10.4232 12L4.17188 18.2513L5.74868 19.8281L12 13.5768L18.2513 19.8281L19.8281 18.2513L13.5768 12L19.8281 5.74868Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/Delete.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Delete = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M14.9531 5H17.9062V6.75H6.09375V5H9.04688L9.89062 4.125H14.1094L14.9531 5ZM8.625 19.875C7.69688 19.875 6.9375 19.0875 6.9375 18.125V7.62502H17.0625V18.125C17.0625 19.0875 16.3031 19.875 15.375 19.875H8.625Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/ExternalLink.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ExternalLink = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M18.5625 18.5625H5.4375V5.4375H12V3.5625H5.4375C4.39687 3.5625 3.5625 4.40625 3.5625 5.4375V18.5625C3.5625 19.5938 4.39687 20.4375 5.4375 20.4375H18.5625C19.5938 20.4375 20.4375 19.5938 20.4375 18.5625V12H18.5625V18.5625ZM13.8648 3.5625V5.44042H17.2356L8.00565 14.6704L9.32959 15.9943L18.5596 6.76436V10.1352H20.4375V3.5625H13.8648Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/Filter.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Filter = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M3 6V8H21V6H3ZM10 18H14V16H10V18ZM18 13H6V11H18V13Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/IconMore.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const IconMore = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M5.625 15.1875C6.55698 15.1875 7.3125 14.432 7.3125 13.5C7.3125 12.568 6.55698 11.8125 5.625 11.8125C4.69302 11.8125 3.9375 12.568 3.9375 13.5C3.9375 14.432 4.69302 15.1875 5.625 15.1875ZM12 15.1875C12.932 15.1875 13.6875 14.432 13.6875 13.5C13.6875 12.568 12.932 11.8125 12 11.8125C11.068 11.8125 10.3125 12.568 10.3125 13.5C10.3125 14.432 11.068 15.1875 12 15.1875ZM20.0625 13.5C20.0625 14.432 19.307 15.1875 18.375 15.1875C17.443 15.1875 16.6875 14.432 16.6875 13.5C16.6875 12.568 17.443 11.8125 18.375 11.8125C19.307 11.8125 20.0625 12.568 20.0625 13.5Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/Remove.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Remove = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M20.25 13.5603H3.75V11.2031H20.25V13.5603Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/Search.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Search = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/SettingDots.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SettingDots = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/SquareChecked.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SquareChecked = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M19.2917 2.625H4.70833C3.5625 2.625 2.625 3.5625 2.625 4.70833V19.2917C2.625 20.4375 3.5625 21.375 4.70833 21.375H19.2917C20.4375 21.375 21.375 20.4375 21.375 19.2917V4.70833C21.375 3.5625 20.4375 2.625 19.2917 2.625ZM9.91667 17.2083L4.70833 12.2003L6.16667 10.7981L9.91667 14.4038L17.8333 6.79167L19.2917 8.19391L9.91667 17.2083Z" />
-  </Svg>
+  </SVG>
 );

package/src/ui/SquareUnchecked.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SquareUnchecked = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M19.2917 4.70833V19.2917H4.70833V4.70833H19.2917ZM19.2917 2.625H4.70833C3.5625 2.625 2.625 3.5625 2.625 4.70833V19.2917C2.625 20.4375 3.5625 21.375 4.70833 21.375H19.2917C20.4375 21.375 21.375 20.4375 21.375 19.2917V4.70833C21.375 3.5625 20.4375 2.625 19.2917 2.625Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/Cart.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Cart = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M8.4 18.525C7.41 18.525 6.609 19.335 6.609 20.325C6.609 21.315 7.41 22.125 8.4 22.125C9.39 22.125 10.2 21.315 10.2 20.325C10.2 19.335 9.39 18.525 8.4 18.525ZM3 4.125V5.925H4.8L8.04 12.756L6.825 14.961C6.681 15.213 6.6 15.51 6.6 15.825C6.6 16.815 7.41 17.625 8.4 17.625H19.2V15.825H8.778C8.652 15.825 8.553 15.726 8.553 15.6L8.58 15.492L9.39 14.025H16.095C16.77 14.025 17.364 13.656 17.67 13.098L20.892 7.257C20.964 7.131 21 6.978 21 6.825C21 6.33 20.595 5.925 20.1 5.925H6.789L5.943 4.125H3ZM17.4 18.525C16.41 18.525 15.609 19.335 15.609 20.325C15.609 21.315 16.41 22.125 17.4 22.125C18.39 22.125 19.2 21.315 19.2 20.325C19.2 19.335 18.39 18.525 17.4 18.525Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/CreditCard.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const CreditCard = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M2.79867 12.6224H14.5914V13.7706H2.79867V12.6224Z" />
     <path d="M2.79867 14.9109H7.8299V16.0591H2.79867V14.9109Z" />
     <path d="M1.83388 6.12415H15.6438C16.6326 6.12415 17.4379 6.92946 17.4379 7.91817V18.3235C17.4379 19.3122 16.6326 20.1175 15.6438 20.1175H1.83388C0.845179 20.1175 0.0398636 19.3122 0.0398636 18.3235V7.91817C0.0398636 6.92946 0.845179 6.12415 1.83388 6.12415ZM2.14485 18.0205H15.3409V8.22115H2.14485V18.0205Z" />
     <path d="M22.3655 3.85175H8.56346C7.68638 3.85175 6.96878 4.56935 6.96878 5.44643V5.76537H8.66712V5.55008H22.2618V7.24842H17.6771C17.7488 7.45573 17.7967 7.67899 17.7967 7.91819V10.6451H22.2618V15.7401H17.7967V17.4385H22.3655C23.2425 17.4385 23.9601 16.7208 23.9601 15.8438V5.44643C23.9601 4.56935 23.2425 3.85175 22.3655 3.85175Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/Group.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Group = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M10.8982 7.6321C10.8982 9.44301 9.44726 10.9048 7.63635 10.9048C5.82544 10.9048 4.36363 9.44301 4.36363 7.6321C4.36363 5.82119 5.82544 4.35938 7.63635 4.35938C9.44726 4.35938 10.8982 5.82119 10.8982 7.6321ZM19.6255 7.6321C19.6255 9.44301 18.1746 10.9048 16.3636 10.9048C14.5527 10.9048 13.0909 9.44301 13.0909 7.6321C13.0909 5.82119 14.5527 4.35938 16.3636 4.35938C18.1746 4.35938 19.6255 5.82119 19.6255 7.6321ZM7.63636 13.0867C5.09455 13.0867 0 14.3631 0 16.9049V19.6322H15.2727V16.9049C15.2727 14.3631 10.1782 13.0867 7.63636 13.0867ZM15.3055 13.1412C15.6873 13.1085 16.0473 13.0867 16.3636 13.0867C18.9055 13.0867 24 14.3631 24 16.9049V19.6322H17.4545V16.9049C17.4545 15.2903 16.5709 14.0576 15.3055 13.1412Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/Id.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Id = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M10.5353 13.8562H20.7873V12.5809H10.5353V13.8562ZM10.5353 11.3051H14.9761V10.0298H10.5353V11.3051ZM5.29154 9.25003C5.60605 8.95131 5.98371 8.80136 6.4253 8.80136C6.8657 8.80136 7.24375 8.95131 7.55906 9.25003C7.87358 9.54993 8.03143 9.92757 8.03143 10.3841C8.03143 10.8407 7.87358 11.227 7.55906 11.5415C7.24375 11.8564 6.8657 12.0138 6.4253 12.0138C5.98371 12.0138 5.60605 11.8564 5.29154 11.5415C4.97623 11.227 4.81877 10.849 4.81877 10.4074C4.81877 9.93506 4.97623 9.54993 5.29154 9.25003ZM8.45685 13.1948C9.24373 13.5101 9.63757 13.9197 9.63757 14.4232V15.2263H3.21266V14.4232C3.21266 13.9197 3.62149 13.5101 4.44073 13.1948C5.10252 12.9431 5.76392 12.8168 6.42531 12.8168C7.0867 12.8168 7.76349 12.9431 8.45685 13.1948ZM2.37604 5.8125C2.16087 5.8125 1.97683 5.88799 1.8239 6.03859C1.67021 6.18957 1.59375 6.37037 1.59375 6.58099V17.4259C1.59375 17.6369 1.67021 17.8177 1.8239 17.968C1.97683 18.1193 2.16087 18.1941 2.37604 18.1941H21.6037C21.8177 18.1941 22.0018 18.1193 22.1555 17.968C22.3088 17.8177 22.3856 17.6369 22.3856 17.4259V6.58099C22.3856 6.37037 22.3088 6.18957 22.1555 6.03859C22.0018 5.88799 21.8177 5.8125 21.6037 5.8125H2.37604ZM24 6.34489V17.6827C24 18.2494 23.7948 18.7458 23.3856 19.1708C22.9759 19.5958 22.472 19.8085 21.8741 19.8085H2.12625C1.5276 19.8085 1.02327 19.5958 0.614433 19.1708C0.204811 18.7458 0 18.2494 0 17.6827V6.34489C0 5.74667 0.204811 5.24275 0.614433 4.83315C1.02327 4.42395 1.5276 4.21875 2.12625 4.21875H21.8741C22.472 4.21875 22.9759 4.42395 23.3856 4.83315C23.7948 5.24275 24 5.74667 24 6.34489Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/SmilieDissatisfied.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SmilieDissatisfied = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.9907 2.65417C6.83178 2.65417 2.65421 6.84109 2.65421 12C2.65421 17.1588 6.83178 21.3458 11.9907 21.3458C17.1589 21.3458 21.3458 17.1588 21.3458 12C21.3458 6.84109 17.1589 2.65417 11.9907 2.65417ZM12 19.4766C7.86916 19.4766 4.52336 16.1308 4.52336 11.9999C4.52336 7.8691 7.86916 4.52331 12 4.52331C16.1308 4.52331 19.4766 7.8691 19.4766 11.9999C19.4766 16.1308 16.1308 19.4766 12 19.4766ZM7.21495 17.1401C7.96262 15.2243 9.82243 13.8691 12 13.8691C14.1776 13.8691 16.0374 15.2243 16.785 17.1401H15.2243C14.5701 16.028 13.3832 15.271 12 15.271C10.6168 15.271 9.42056 16.028 8.7757 17.1401H7.21495ZM15.271 11.0655C16.0453 11.0655 16.6729 10.4378 16.6729 9.66358C16.6729 8.88935 16.0453 8.26171 15.271 8.26171C14.4968 8.26171 13.8692 8.88935 13.8692 9.66358C13.8692 10.4378 14.4968 11.0655 15.271 11.0655ZM10.1308 9.66358C10.1308 10.4378 9.5032 11.0655 8.72897 11.0655C7.95474 11.0655 7.3271 10.4378 7.3271 9.66358C7.3271 8.88935 7.95474 8.26171 8.72897 8.26171C9.5032 8.26171 10.1308 8.88935 10.1308 9.66358Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/SmilieNeutral.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SmilieNeutral = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12.0083 2.67188C6.84945 2.67188 2.67188 6.85879 2.67188 12.0177C2.67188 17.1765 6.84945 21.3635 12.0083 21.3635C17.1765 21.3635 21.3635 17.1765 21.3635 12.0177C21.3635 6.85879 17.1765 2.67188 12.0083 2.67188ZM12.0177 19.4943C7.88683 19.4943 4.54103 16.1485 4.54103 12.0177C4.54103 7.88683 7.88683 4.54103 12.0177 4.54103C16.1485 4.54103 19.4943 7.88683 19.4943 12.0177C19.4943 16.1485 16.1485 19.4943 12.0177 19.4943ZM8.74664 11.0831C9.52087 11.0831 10.1485 10.4555 10.1485 9.68122C10.1485 8.90699 9.52087 8.27935 8.74664 8.27935C7.97241 8.27935 7.34477 8.90699 7.34477 9.68122C7.34477 10.4555 7.97241 11.0831 8.74664 11.0831ZM9.21393 13.8868V15.2887H14.8214V13.8868H9.21393ZM15.2887 11.0831C16.0629 11.0831 16.6906 10.4555 16.6906 9.68122C16.6906 8.90699 16.0629 8.27935 15.2887 8.27935C14.5145 8.27935 13.8868 8.90699 13.8868 9.68122C13.8868 10.4555 14.5145 11.0831 15.2887 11.0831Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/SmilieSatisfied.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SmilieSatisfied = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.9907 2.65417C6.83178 2.65417 2.65421 6.84109 2.65421 12C2.65421 17.1588 6.83178 21.3458 11.9907 21.3458C17.1589 21.3458 21.3458 17.1588 21.3458 12C21.3458 6.84109 17.1589 2.65417 11.9907 2.65417ZM12 19.4766C7.86917 19.4766 4.52337 16.1308 4.52337 11.9999C4.52337 7.8691 7.86917 4.52331 12 4.52331C16.1308 4.52331 19.4766 7.8691 19.4766 11.9999C19.4766 16.1308 16.1308 19.4766 12 19.4766ZM8.7757 13.8691C9.42991 14.9813 10.6168 15.7383 12 15.7383C13.3832 15.7383 14.5701 14.9813 15.2243 13.8691H16.785C16.0374 15.785 14.1776 17.1401 12 17.1401C9.82243 17.1401 7.96262 15.785 7.21495 13.8691H8.7757ZM15.271 11.0655C16.0453 11.0655 16.6729 10.4378 16.6729 9.66358C16.6729 8.88935 16.0453 8.26171 15.271 8.26171C14.4968 8.26171 13.8692 8.88935 13.8692 9.66358C13.8692 10.4378 14.4968 11.0655 15.271 11.0655ZM10.1308 9.66358C10.1308 10.4378 9.50321 11.0655 8.72898 11.0655C7.95474 11.0655 7.3271 10.4378 7.3271 9.66358C7.3271 8.88935 7.95474 8.26171 8.72898 8.26171C9.50321 8.26171 10.1308 8.88935 10.1308 9.66358Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/SmilieVeryDissatisfied.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SmilieVeryDissatisfied = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.9906 2.625C6.81563 2.625 2.625 6.81563 2.625 12C2.625 17.1844 6.81563 21.375 11.9906 21.375C17.1656 21.375 21.375 17.1844 21.375 12C21.375 6.81563 17.175 2.625 11.9906 2.625ZM12 19.5C7.85625 19.5 4.5 16.1438 4.5 12C4.5 7.85625 7.85625 4.5 12 4.5C16.1438 4.5 19.5 7.85625 19.5 12C19.5 16.1438 16.1438 19.5 12 19.5ZM14.925 9.01871L15.9188 8.02496L16.9125 9.01871L15.9188 10.0125L16.9125 11.0062L15.9188 12L14.925 11.0062L13.9313 12L12.9375 11.0062L13.9313 10.0125L12.9375 9.01871L13.9313 8.02496L14.925 9.01871ZM8.08125 12L9.075 11.0062L10.0687 12L11.0625 11.0062L10.0687 10.0125L11.0625 9.01871L10.0687 8.02496L9.075 9.01871L8.08125 8.02496L7.0875 9.01871L8.08125 10.0125L7.0875 11.0062L8.08125 12ZM7.20938 17.1562C7.95938 15.2437 9.81563 13.875 12 13.875C14.1844 13.875 16.0406 15.2437 16.7906 17.1562H7.20938Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/SmilieVerySatisfied.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SmilieVerySatisfied = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.9906 2.625C6.81563 2.625 2.625 6.81563 2.625 12C2.625 17.1844 6.81563 21.375 11.9906 21.375C17.1656 21.375 21.375 17.1844 21.375 12C21.375 6.81563 17.175 2.625 11.9906 2.625ZM12 19.5C7.85625 19.5 4.5 16.1438 4.5 12C4.5 7.85625 7.85625 4.5 12 4.5C16.1438 4.5 19.5 7.85625 19.5 12C19.5 16.1438 16.1438 19.5 12 19.5ZM13.9313 11.0625L12.9375 10.0687L14.925 8.08125L16.9125 10.0687L15.9188 11.0625L14.925 10.0687L13.9313 11.0625ZM9.07501 10.0687L10.0688 11.0625L11.0625 10.0687L9.07501 8.08125L7.0875 10.0687L8.08125 11.0625L9.07501 10.0687ZM16.7906 13.875C16.0406 15.7875 14.1844 17.1562 12 17.1562C9.81562 17.1562 7.95937 15.7875 7.20937 13.875H16.7906Z" />
-  </Svg>
+  </SVG>
 );

package/src/user/User.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const User = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.5 7.5C16.5 9.98625 14.4862 12 12 12C9.51375 12 7.5 9.98625 7.5 7.5C7.5 5.01375 9.51375 3 12 3C14.4862 3 16.5 5.01375 16.5 7.5ZM3 18.75C3 15.7575 8.99625 14.25 12 14.25C15.0037 14.25 21 15.7575 21 18.75V21H3V18.75Z" />
-  </Svg>
+  </SVG>
 );

package/tsconfig.build.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@marigold/tsconfig"
+}