@marigold/icons 0.0.2 → 0.3.0

package/src/action/Cancel.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Cancel = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M17.8869 16.2363L13.6505 12L17.8869 7.76362L16.2364 6.11309L12 10.3494L7.76365 6.11309L6.11313 7.76362L10.3495 12L6.11313 16.2363L7.76365 17.8869L12 13.6505L16.2364 17.8869L17.8869 16.2363ZM3.69234 3.74736C6.00309 1.43661 8.77228 0.28125 12 0.28125C15.2277 0.28125 17.9877 1.42744 20.2801 3.71985C22.5726 6.01226 23.7188 8.77228 23.7188 12C23.7188 15.2277 22.5726 17.9877 20.2801 20.2801C17.9877 22.5726 15.2277 23.7188 12 23.7188C8.77228 23.7188 6.01226 22.5726 3.71985 20.2801C1.42744 17.9877 0.28125 15.2277 0.28125 12C0.28125 8.77228 1.41827 6.02143 3.69234 3.74736Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Crop.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Crop = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.0909 14.4545H17.7273V7.90909C17.7273 7.00909 16.9909 6.27273 16.0909 6.27273H9.54545V7.90909H16.0909V14.4545ZM7.90909 16.0909V3H6.27273V6.27273H3V7.90909H6.27273V16.0909C6.27273 16.9909 7.00909 17.7273 7.90909 17.7273H16.0909V21H17.7273V17.7273H21V16.0909H7.90909Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Edit.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Edit = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M4.125 16.5942V19.875H7.40579L17.082 10.1988L13.8012 6.91805L4.125 16.5942ZM19.6191 7.6617C19.9603 7.32049 19.9603 6.76932 19.6191 6.42812L17.5719 4.3809C17.2307 4.0397 16.6795 4.0397 16.3383 4.3809L14.7373 5.98193L18.0181 9.26272L19.6191 7.6617Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/FormatBold.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const FormatBold = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       d="M16.1277 11.7413C17.3229 10.9157 18.1607 9.56036 18.1607 8.30357C18.1607 5.51893 16.0045 3.375 13.2321 3.375H5.53125V20.625H14.2055C16.7807 20.625 18.7768 18.5304 18.7768 15.9552C18.7768 14.0823 17.7171 12.4805 16.1277 11.7413ZM9.22767 6.45539H12.9241C13.9468 6.45539 14.7723 7.28093 14.7723 8.30361C14.7723 9.32628 13.9468 10.1518 12.9241 10.1518H9.22767V6.45539ZM9.22767 17.5446H13.5402C14.5628 17.5446 15.3884 16.719 15.3884 15.6964C15.3884 14.6737 14.5628 13.8482 13.5402 13.8482H9.22767V17.5446Z"
     />
-  </Svg>
+  </SVG>
 );

package/src/action/FormatItalic.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const FormatItalic = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M10.1021 3.375H19.8726V6.9126H16.36L12.0657 17.02H14.9873V20.625H4.8125V17.02H8.61163L12.8214 6.9126H10.1021V3.375Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/FormatSize.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const FormatSize = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M8.82237 8.25493V5.53125H20.625V8.25493H16.0855V19.1497H13.3618V8.25493H8.82237ZM6.09868 12.7944H3.375V10.0707H11.5461V12.7944H8.82237V19.1496H6.09868V12.7944Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/HighlightOff.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const HighlightOff = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       d="M12 0.28125C5.51953 0.28125 0.28125 5.51953 0.28125 12C0.28125 18.4805 5.51953 23.7188 12 23.7188C18.4805 23.7188 23.7188 18.4805 23.7188 12C23.7188 5.51953 18.4805 0.28125 12 0.28125ZM15.0352 7.3125L12 10.3477L8.96484 7.3125L7.3125 8.96484L10.3477 12L7.3125 15.0352L8.96484 16.6875L12 13.6523L15.0352 16.6875L16.6875 15.0352L13.6523 12L16.6875 8.96484L15.0352 7.3125ZM2.625 12C2.625 17.168 6.83203 21.375 12 21.375C17.168 21.375 21.375 17.168 21.375 12C21.375 6.83203 17.168 2.625 12 2.625C6.83203 2.625 2.625 6.83203 2.625 12Z"
     />
-  </Svg>
+  </SVG>
 );

package/src/action/Image.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Image = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M20.4375 18.5625V5.4375C20.4375 4.40625 19.5938 3.5625 18.5625 3.5625H5.4375C4.40625 3.5625 3.5625 4.40625 3.5625 5.4375V18.5625C3.5625 19.5938 4.40625 20.4375 5.4375 20.4375H18.5625C19.5938 20.4375 20.4375 19.5938 20.4375 18.5625ZM8.71875 13.4062L11.0625 16.2281L14.3438 12L18.5625 17.625H5.4375L8.71875 13.4062Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Location.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Location = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12 8.72733C10.1918 8.72733 8.72727 10.1919 8.72727 12.0001C8.72727 13.8082 10.1918 15.2728 12 15.2728C13.8082 15.2728 15.2727 13.8082 15.2727 12.0001C15.2727 10.1919 13.8082 8.72733 12 8.72733ZM19.3145 11.1818C18.9382 7.77 16.23 5.06182 12.8182 4.68545V3H11.1818V4.68545C7.77 5.06182 5.06182 7.77 4.68545 11.1818H3V12.8182H4.68545C5.06182 16.23 7.77 18.9382 11.1818 19.3145V21H12.8182V19.3145C16.23 18.9382 18.9382 16.23 19.3145 12.8182H21V11.1818H19.3145ZM12 17.7272C8.83364 17.7272 6.27273 15.1663 6.27273 11.9999C6.27273 8.83358 8.83364 6.27267 12 6.27267C15.1664 6.27267 17.7273 8.83358 17.7273 11.9999C17.7273 15.1663 15.1664 17.7272 12 17.7272Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Lock.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Lock = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M17.1562 8.15625H16.2991V6.44196C16.2991 4.07625 14.3791 2.15625 12.0134 2.15625C9.64768 2.15625 7.72768 4.07625 7.72768 6.44196V8.15625H6.87054C5.92768 8.15625 5.15625 8.92768 5.15625 9.87054V18.442C5.15625 19.3848 5.92768 20.1562 6.87054 20.1562H17.1562C18.0991 20.1562 18.8705 19.3848 18.8705 18.442V9.87054C18.8705 8.92768 18.0991 8.15625 17.1562 8.15625ZM14.6705 8.15629H9.35625V6.44201C9.35625 4.97629 10.5477 3.78486 12.0134 3.78486C13.4791 3.78486 14.6705 4.97629 14.6705 6.44201V8.15629Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/LockOpen.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const LockOpen = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       d="M14.6719 9L6.87054 9C5.92768 9 5.15625 9.77143 5.15625 10.7143V19.2857C5.15625 20.2286 5.92768 21 6.87054 21H17.1562C18.0991 21 18.8705 20.2286 18.8705 19.2857V10.7143C18.8705 9.77143 18.0991 9 17.1562 9L16.3004 9V7.28572C16.3004 5.29688 14.8627 2.92969 11.9766 2.92969C8.9096 2.92969 7.73973 5.50781 7.73973 7.28572H9.3683C9.3683 4.92 11.3638 4.5 11.9766 4.5C12.5893 4.5 14.6719 4.92 14.6719 7.28572V9ZM6.87055 19.2858H17.1563V10.7144H6.87055V19.2858Z"
     />
-  </Svg>
+  </SVG>
 );

package/src/action/Pause.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Pause = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M14.4134 3.61877H19.1946V20.3813H14.4134V3.61877ZM4.79462 20.3813V3.61877H9.57587V20.3813H4.79462Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/PauseAlt.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const PauseAlt = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M13.1554 16.6764V7.32344H15.5211V16.6764H13.1554ZM5.34289 18.6571C7.2135 20.4911 9.43252 21.408 12 21.408C14.5675 21.408 16.7774 20.4819 18.6296 18.6296C20.4819 16.7774 21.408 14.5675 21.408 12C21.408 9.43251 20.4819 7.22266 18.6296 5.37039C16.7774 3.51812 14.5675 2.592 12 2.592C9.43252 2.592 7.22267 3.51812 5.3704 5.37039C3.51813 7.22266 2.59201 9.43251 2.59201 12C2.59201 14.5675 3.50896 16.7865 5.34289 18.6571ZM3.69234 3.74736C6.00309 1.43661 8.77228 0.28125 12 0.28125C15.2277 0.28125 17.9877 1.42744 20.2801 3.71985C22.5726 6.01226 23.7188 8.77228 23.7188 12C23.7188 15.2277 22.5726 17.9877 20.2801 20.2801C17.9877 22.5726 15.2277 23.7188 12 23.7188C8.77228 23.7188 6.01226 22.5726 3.71985 20.2801C1.42744 17.9877 0.28125 15.2277 0.28125 12C0.28125 8.77228 1.41827 6.02143 3.69234 3.74736ZM8.47889 16.6764V7.32344H10.8446V16.6764H8.47889Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Play.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Play = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M6.69775 3.61865L19.8603 11.9999L6.69775 20.3812V3.61865Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/PlayAlt.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const PlayAlt = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M5.34287 18.6571C7.21348 20.4911 9.4325 21.408 12 21.408C14.5675 21.408 16.7774 20.4819 18.6296 18.6296C20.4819 16.7774 21.408 14.5675 21.408 12C21.408 9.43251 20.4819 7.22266 18.6296 5.37039C16.7774 3.51812 14.5675 2.592 12 2.592C9.4325 2.592 7.22265 3.51812 5.37038 5.37039C3.51811 7.22266 2.59199 9.43251 2.59199 12C2.59199 14.5675 3.50894 16.7865 5.34287 18.6571ZM3.69234 3.74736C6.00309 1.43661 8.77228 0.28125 12 0.28125C15.2277 0.28125 17.9877 1.42744 20.2801 3.71985C22.5726 6.01226 23.7188 8.77228 23.7188 12C23.7188 15.2277 22.5726 17.9877 20.2801 20.2801C17.9877 22.5726 15.2277 23.7188 12 23.7188C8.77228 23.7188 6.01226 22.5726 3.71985 20.2801C1.42744 17.9877 0.28125 15.2277 0.28125 12C0.28125 8.77228 1.41827 6.02143 3.69234 3.74736ZM9.63424 17.2817V6.71835L16.6765 12L9.63424 17.2817Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/ResaleEdit.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const ResaleEdit = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M20.7958 17.6789C20.9751 17.7813 21.0584 17.9543 21.0456 18.1977C21.0328 18.4411 20.9239 18.6524 20.7189 18.8318L18.8358 20.7149C18.4515 21.0992 18.0672 21.0992 17.6829 20.7149L10.2274 13.2594C9.30511 13.6437 8.32515 13.7269 7.28752 13.5092C6.2499 13.2914 5.34679 12.7982 4.57818 12.0296C3.75833 11.2097 3.24593 10.2362 3.04097 9.10889C2.836 7.9816 2.98972 6.93118 3.50213 5.9576L7.11459 9.4932L9.57413 7.03365L6.03854 3.49806C7.01211 3.03689 8.06253 2.89598 9.18983 3.07532C10.3171 3.25467 11.2907 3.75426 12.1105 4.57411C12.8791 5.34272 13.3723 6.24582 13.5901 7.28345C13.8079 8.32107 13.7246 9.30104 13.3403 10.2234L20.7958 17.6789Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/RotateLeft.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const RotateLeft = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M7.13065 10.0699L5.73658 8.66596C4.84675 9.81285 4.29308 11.1377 4.125 12.512H6.12217C6.26059 11.6518 6.60664 10.8114 7.13065 10.0699ZM6.12217 14.4894H4.125C4.29308 15.8637 4.83686 17.1886 5.7267 18.3355L7.12076 16.9315C6.60664 16.19 6.26059 15.3595 6.12217 14.4894ZM7.12076 19.7493C8.26766 20.6391 9.6024 21.173 10.9767 21.3411V19.334C10.1165 19.1857 9.28602 18.8496 8.54449 18.3157L7.12076 19.7493ZM12.9541 5.66031V2.625L8.45551 7.12359L12.9541 11.5233V7.65749C15.762 8.13206 17.8976 10.5643 17.8976 13.5007C17.8976 16.4371 15.762 18.8694 12.9541 19.3439V21.3411C16.8595 20.8566 19.875 17.5346 19.875 13.5007C19.875 9.46681 16.8595 6.14477 12.9541 5.66031Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/RotateRight.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const RotateRight = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M15.5445 7.12359L11.0459 2.625V5.66031C7.15042 6.14477 4.125 9.46681 4.125 13.5007C4.125 17.5346 7.14054 20.8566 11.0459 21.3411V19.3439C8.23799 18.8694 6.1024 16.4371 6.1024 13.5007C6.1024 10.5643 8.23799 8.13206 11.0459 7.65749V11.5233L15.5445 7.12359ZM19.875 12.512C19.7069 11.1377 19.1631 9.81285 18.2733 8.66596L16.8694 10.0699C17.4032 10.8114 17.7394 11.6518 17.8778 12.512H19.875ZM13.0233 19.334V21.3312C14.3976 21.1631 15.7323 20.6292 16.8792 19.7394L15.4555 18.3157C14.714 18.8496 13.8835 19.1956 13.0233 19.334ZM16.8694 16.9414L18.2733 18.3355C19.1631 17.1886 19.7069 15.8637 19.875 14.4894H17.8778C17.7394 15.3496 17.4032 16.19 16.8694 16.9414Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Save.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Save = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M15 9V5.01562H5.01562V9H15ZM9.89062 18.0938C10.4844 18.6875 11.1875 18.9844 12 18.9844C12.8125 18.9844 13.5156 18.6875 14.1094 18.0938C14.7031 17.5 15 16.7969 15 15.9844C15 15.1719 14.7031 14.4688 14.1094 13.875C13.5156 13.2812 12.8125 12.9844 12 12.9844C11.1875 12.9844 10.4844 13.2812 9.89062 13.875C9.29687 14.4688 9 15.1719 9 15.9844C9 16.7969 9.29687 17.5 9.89062 18.0938ZM17.0156 3L21 6.98438V18.9844C21 19.5156 20.7969 19.9844 20.3906 20.3906C19.9844 20.7969 19.5156 21 18.9844 21H5.01562C4.45312 21 3.97656 20.7969 3.58594 20.3906C3.19531 19.9844 3 19.5156 3 18.9844V5.01562C3 4.48437 3.19531 4.01563 3.58594 3.60938C3.97656 3.20312 4.45312 3 5.01562 3H17.0156Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Sort.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Sort = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M17.3962 14.588L12.5042 19.48C12.3731 19.611 12.1984 19.6876 12.0128 19.6876C11.8272 19.6876 11.6524 19.611 11.5214 19.48L6.62934 14.588C6.49827 14.4569 6.42188 14.2823 6.42188 14.0965C6.42188 13.7144 6.73856 13.3977 7.12078 13.3977H16.9048C17.287 13.3977 17.6037 13.7144 17.6037 14.0965C17.6037 14.2823 17.5273 14.4569 17.3962 14.588ZM16.9048 10.6022H7.12078C6.73856 10.6022 6.42188 10.2855 6.42188 9.9034C6.42188 9.71765 6.49827 9.54302 6.62934 9.41195L11.5214 4.51996C11.6524 4.38889 11.8272 4.3125 12.0128 4.3125C12.1984 4.3125 12.3731 4.38889 12.5042 4.51996L17.3962 9.41195C17.5273 9.54302 17.6037 9.71765 17.6037 9.9034C17.6037 10.2855 17.287 10.6022 16.9048 10.6022Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/SortDown.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SortDown = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/SortUp.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const SortUp = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Star.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Star = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12 17.131L17.562 20.4568L16.086 14.1886L21 9.9711L14.529 9.4272L12 3.51562L9.471 9.4272L3 9.9711L7.914 14.1886L6.438 20.4568L12 17.131Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Stop.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Stop = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M4.76953 4.86328H19.1836V19.2773H4.76953V4.86328Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Underlined.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Underlined = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M17.9896 11.0417C17.9896 14.2138 15.4117 16.7917 12.2396 16.7917C9.0675 16.7917 6.48958 14.2138 6.48958 11.0417V3.375H8.88541V11.0417C8.88541 12.8913 10.39 14.3958 12.2396 14.3958C14.0892 14.3958 15.5938 12.8913 15.5938 11.0417V3.375H17.9896V11.0417ZM5.53125 20.625V18.7083H18.9479V20.625H5.53125Z" />
-  </Svg>
+  </SVG>
 );

package/src/action/Zoom.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Zoom = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.1537 14.4853H15.275L14.9636 14.185C16.0536 12.917 16.7099 11.2707 16.7099 9.47995C16.7099 5.48679 13.4731 2.25 9.47995 2.25C5.48679 2.25 2.25 5.48679 2.25 9.47995C2.25 13.4731 5.48679 16.7099 9.47995 16.7099C11.2707 16.7099 12.917 16.0536 14.185 14.9636L14.4853 15.275V16.1537L20.0468 21.7041L21.7041 20.0468L16.1537 14.4853ZM9.47994 14.4853C6.71032 14.4853 4.47459 12.2496 4.47459 9.47996C4.47459 6.71033 6.71032 4.47461 9.47994 4.47461C12.2496 4.47461 14.4853 6.71033 14.4853 9.47996C14.4853 12.2496 12.2496 14.4853 9.47994 14.4853Z" />
     <path d="M12.2607 10.0361H10.0361V12.2607H8.92382V10.0361H6.69922V8.92382H8.92382V6.69922H10.0361V8.92382H12.2607V10.0361Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Accessible.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Accessible = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12.0188 5.94388C13.1337 5.94388 14.0375 5.04008 14.0375 3.92519C14.0375 2.81029 13.1337 1.90649 12.0188 1.90649C10.904 1.90649 10.0002 2.81029 10.0002 3.92519C10.0002 5.04008 10.904 5.94388 12.0188 5.94388Z" />
     <path d="M19.0843 13.0093V10.9906C17.5299 11.0108 15.9654 10.2336 14.9762 9.14347L13.6742 7.7001C13.5026 7.50833 13.2906 7.35692 13.0585 7.2459C13.0484 7.2459 13.0484 7.2358 13.0383 7.2358H13.0282C12.6749 7.03393 12.2712 6.933 11.8271 6.97337C10.7673 7.06421 10.0002 8.00291 10.0002 9.06272V15.028C10.0002 16.1382 10.9086 17.0466 12.0188 17.0466H17.0656V22.0934H19.0843V16.542C19.0843 15.4317 18.1759 14.5233 17.0656 14.5233H14.0375V11.041C15.3396 12.121 17.3179 12.9992 19.0843 13.0093ZM12.8566 18.056C12.4428 19.2268 11.3224 20.0747 10.0002 20.0747C8.32464 20.0747 6.97212 18.7222 6.97212 17.0466C6.97212 15.7244 7.81997 14.6141 8.99081 14.1902V12.1008C6.6895 12.5651 4.95343 14.604 4.95343 17.0466C4.95343 19.8324 7.21436 22.0934 10.0002 22.0934C12.4428 22.0934 14.4817 20.3573 14.946 18.056H12.8566Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/AutoRenew.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const AutoRenew = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12 6.87305C11.0723 6.87305 10.2178 7.10498 9.43652 7.56885C8.65527 8.03272 8.03882 8.65527 7.58716 9.43652C7.1355 10.2178 6.90967 11.0723 6.90967 12C6.90967 12.8545 7.10498 13.6479 7.49561 14.3804L6.25049 15.6255C5.54248 14.5268 5.18848 13.3184 5.18848 12C5.18848 10.7549 5.49365 9.61353 6.104 8.57593C6.71436 7.53832 7.54443 6.71436 8.59424 6.104C9.64405 5.49365 10.7793 5.18848 12 5.18848V2.625L15.4058 6.03076L12 9.43652V6.87305ZM17.7861 8.37451C18.4697 9.47315 18.8115 10.6816 18.8115 12C18.8115 13.2451 18.5064 14.3865 17.896 15.4241C17.2856 16.4617 16.4617 17.2856 15.4241 17.896C14.3865 18.5064 13.2451 18.8115 12 18.8115V21.375L8.59424 17.9692L12 14.5635V17.127C12.9277 17.127 13.7822 16.895 14.5635 16.4312C15.3447 15.9673 15.9673 15.3447 16.4312 14.5635C16.895 13.7822 17.127 12.9277 17.127 12C17.127 11.1699 16.9316 10.3765 16.541 9.61963L17.7861 8.37451Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Banned.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Banned = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.8649 18.4904C10.5915 18.4904 9.40503 18.1231 8.39423 17.4979L17.4979 8.39422C18.1231 9.40503 18.4904 10.5915 18.4904 11.8649C18.4904 15.5181 15.5181 18.4904 11.8649 18.4904ZM12.1351 5.50958C13.4085 5.50958 14.595 5.87686 15.6058 6.50203L6.50207 15.6057C5.8769 14.5949 5.50961 13.4085 5.50961 12.135C5.50961 8.48185 8.48189 5.50958 12.1351 5.50958ZM12 2.625C6.83059 2.625 2.625 6.83059 2.625 12C2.625 17.1694 6.83059 21.375 12 21.375C17.1694 21.375 21.375 17.1694 21.375 12C21.375 6.83059 17.1694 2.625 12 2.625Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Bus.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Bus = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M3.79688 16.6184C3.79688 17.5216 4.19714 18.3324 4.82319 18.8968V20.7237C4.82319 21.2882 5.28503 21.75 5.84951 21.75H6.87582C7.4403 21.75 7.90214 21.2882 7.90214 20.7237V19.6974H16.1127V20.7237C16.1127 21.2882 16.5745 21.75 17.139 21.75H18.1653C18.7298 21.75 19.1916 21.2882 19.1916 20.7237V18.8968C19.8177 18.3324 20.2179 17.5216 20.2179 16.6184V6.35526C20.2179 2.76316 16.5437 2.25 12.0074 2.25C7.47109 2.25 3.79688 2.76316 3.79688 6.35526V16.6184ZM7.38899 17.6448C6.53715 17.6448 5.84952 16.9571 5.84952 16.1053C5.84952 15.2534 6.53715 14.5658 7.38899 14.5658C8.24083 14.5658 8.92846 15.2534 8.92846 16.1053C8.92846 16.9571 8.24083 17.6448 7.38899 17.6448ZM16.6258 17.6448C15.774 17.6448 15.0864 16.9571 15.0864 16.1053C15.0864 15.2534 15.774 14.5658 16.6258 14.5658C17.4777 14.5658 18.1653 15.2534 18.1653 16.1053C18.1653 16.9571 17.4777 17.6448 16.6258 17.6448ZM18.1653 11.4868H5.84952V6.35526H18.1653V11.4868Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Calendar.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Calendar = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Camera.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Camera = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.9634 17.6396C12.8179 17.6396 13.5991 17.4321 14.3071 17.0171C15.0151 16.602 15.5828 16.0344 16.01 15.3142C16.4373 14.594 16.6509 13.8127 16.6509 12.9705C16.6509 12.1282 16.4373 11.3469 16.01 10.6267C15.5828 9.90649 15.0151 9.33887 14.3071 8.92383C13.5991 8.50879 12.8179 8.30127 11.9634 8.30127C11.1089 8.30127 10.3276 8.50879 9.61963 8.92383C8.91162 9.33887 8.3501 9.90649 7.93506 10.6267C7.52002 11.3469 7.3125 12.1282 7.3125 12.9705C7.3125 13.8127 7.52002 14.594 7.93506 15.3142C8.3501 16.0344 8.91162 16.602 9.61963 17.0171C10.3276 17.4321 11.1089 17.6396 11.9634 17.6396ZM19.4341 5.48145C19.9468 5.48145 20.3862 5.66455 20.7524 6.03076C21.1187 6.39697 21.3018 6.83642 21.3018 7.34912V18.5552C21.3018 19.0679 21.1187 19.5073 20.7524 19.8735C20.3862 20.2397 19.9468 20.4229 19.4341 20.4229H4.49268C3.97998 20.4229 3.54053 20.2397 3.17432 19.8735C2.8081 19.5073 2.625 19.0679 2.625 18.5552V7.34912C2.625 6.83642 2.8081 6.39697 3.17432 6.03076C3.54053 5.66455 3.97998 5.48145 4.49268 5.48145H7.45898L9.18018 3.61377H14.7832L16.4678 5.48145H19.4341ZM11.9634 9.98584C12.7935 9.98584 13.5015 10.2788 14.0874 10.8647C14.6733 11.4507 14.9663 12.1526 14.9663 12.9705C14.9663 13.7883 14.6733 14.4902 14.0874 15.0762C13.5015 15.6621 12.7935 15.9551 11.9634 15.9551C11.1333 15.9551 10.4253 15.6621 9.83936 15.0762C9.25342 14.4902 8.96045 13.7883 8.96045 12.9705C8.96045 12.1526 9.25342 11.4507 9.83936 10.8647C10.4253 10.2788 11.1333 9.98584 11.9634 9.98584Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Clock.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Clock = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12.4672 7.3282H11.0657V12.9343L15.971 15.8775L16.6718 14.7282L12.4672 12.2335V7.3282ZM11.9907 2.65649C6.83305 2.65649 2.65651 6.84238 2.65651 12C2.65651 17.1576 6.83305 21.3435 11.9907 21.3435C17.1576 21.3435 21.3435 17.1576 21.3435 12C21.3435 6.84238 17.1576 2.65649 11.9907 2.65649ZM12 19.4748C7.87018 19.4748 4.52521 16.1298 4.52521 12C4.52521 7.87013 7.87018 4.52516 12 4.52516C16.1298 4.52516 19.4748 7.87013 19.4748 12C19.4748 16.1298 16.1298 19.4748 12 19.4748Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Direction.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Direction = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M21.8288 12.036L12.714 2.92123C12.319 2.52626 11.681 2.52626 11.286 2.92123L2.17123 12.036C1.77626 12.431 1.77626 13.069 2.17123 13.464L11.286 22.5788C11.681 22.9737 12.319 22.9737 12.714 22.5788L21.8288 13.464C22.2237 13.0791 22.2237 12.4411 21.8288 12.036ZM14.0204 15.2869V12.755H9.96944V15.7933H7.94393V11.7423C7.94393 11.1853 8.39967 10.7295 8.95668 10.7295H14.0204V8.19765L17.5651 11.7423L14.0204 15.2869Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Email.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Email = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M19.2 4.78125H4.8C3.81 4.78125 3.009 5.59125 3.009 6.58125L3 17.3813C3 18.3713 3.81 19.1813 4.8 19.1813H19.2C20.19 19.1813 21 18.3713 21 17.3813V6.58125C21 5.59125 20.19 4.78125 19.2 4.78125ZM19.2 8.38125L12 12.8812L4.79999 8.38125V6.58125L12 11.0812L19.2 6.58125V8.38125Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/EventDate.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const EventDate = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M16.5566 11.9766H11.9766V16.5566H16.5566V11.9766ZM15.6406 1.90039V3.73242H8.3125V1.90039H6.48047V3.73242H5.56445C4.54768 3.73242 3.74158 4.55684 3.74158 5.56445L3.73242 18.3887C3.73242 19.3963 4.54768 20.2207 5.56445 20.2207H18.3887C19.3963 20.2207 20.2207 19.3963 20.2207 18.3887V5.56445C20.2207 4.55684 19.3963 3.73242 18.3887 3.73242H17.4727V1.90039H15.6406ZM18.3887 18.3887H5.56445V8.3125H18.3887V18.3887Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Exclamation.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Exclamation = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Feedback.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Feedback = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Food.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Food = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.1938 9.525H9.54375V3.75H7.89375V9.525H6.24375V3.75H4.59375V9.525C4.59375 11.274 5.96325 12.693 7.6875 12.8003V20.25H9.75V12.8003C11.4742 12.693 12.8438 11.274 12.8438 9.525V3.75H11.1938V9.525ZM15.3188 7.05V13.65H17.3813V20.25H19.4438V3.75C17.1668 3.75 15.3188 5.598 15.3188 7.05Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Globe.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Globe = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.9922 4.17188C7.67105 4.17188 4.17188 7.67887 4.17188 12C4.17188 16.3211 7.67105 19.8281 11.9922 19.8281C16.3211 19.8281 19.8281 16.3211 19.8281 12C19.8281 7.67887 16.3211 4.17188 11.9922 4.17188ZM17.4171 8.86878H15.1078C14.8573 7.89026 14.4972 6.95089 14.0275 6.08197C15.4679 6.57514 16.6656 7.57714 17.4171 8.86878ZM12 5.76881C12.6497 6.70818 13.1586 7.74932 13.4952 8.86874H10.5048C10.8414 7.74932 11.3503 6.70818 12 5.76881ZM5.94102 13.5656C5.81577 13.0646 5.73749 12.5402 5.73749 12C5.73749 11.4599 5.81577 10.9354 5.94102 10.4344H8.58693C8.52431 10.951 8.47734 11.4677 8.47734 12C8.47734 12.5323 8.52431 13.049 8.58693 13.5656H5.94102ZM6.58295 15.1313H8.89225C9.14275 16.1098 9.50284 17.0492 9.97253 17.9181C8.53215 17.425 7.33445 16.4308 6.58295 15.1313ZM8.89225 8.86878H6.58295C7.33445 7.56931 8.53215 6.57514 9.97253 6.08197C9.50284 6.95089 9.14275 7.89026 8.89225 8.86878ZM12 18.2313C11.3503 17.2919 10.8414 16.2507 10.5048 15.1313H13.4952C13.1586 16.2507 12.6497 17.2919 12 18.2313ZM13.8318 13.5656H10.1682C10.0978 13.049 10.043 12.5323 10.043 12C10.043 11.4677 10.0978 10.9432 10.1682 10.4344H13.8318C13.9022 10.9432 13.957 11.4677 13.957 12C13.957 12.5323 13.9022 13.049 13.8318 13.5656ZM14.0275 17.9181C14.4972 17.0492 14.8573 16.1098 15.1078 15.1313H17.4171C16.6656 16.423 15.4679 17.425 14.0275 17.9181ZM15.4131 13.5656C15.4757 13.049 15.5227 12.5323 15.5227 12C15.5227 11.4677 15.4757 10.951 15.4131 10.4344H18.059C18.1842 10.9354 18.2625 11.4599 18.2625 12C18.2625 12.5402 18.1842 13.0646 18.059 13.5656H15.4131Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Home.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Home = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M9.9 20.113V13.8415H14.1V20.113H19.35V11.751H22.5L12 2.34375L1.5 11.751H4.65V20.113H9.9Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Info.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Info = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M12 2.85938C6.95437 2.85938 2.85938 6.95437 2.85938 12C2.85938 17.0456 6.95437 21.1406 12 21.1406C17.0456 21.1406 21.1406 17.0456 21.1406 12C21.1406 6.95437 17.0456 2.85938 12 2.85938ZM12.7875 15.9374H11.2125V11.2124H12.7875V15.9374ZM12.7875 9.6375H11.2125V8.0625H12.7875V9.6375Z" />
-  </Svg>
+  </SVG>
 );

package/src/info/Marker.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Svg } from '@marigold/components';
+import { SVG } from '@marigold/system';
 
 export const Marker = ({ className = '', ...props }) => (
-  <Svg className={className} {...props}>
+  <SVG className={className} {...props}>
     <path d="M11.9813 2.25C8.208 2.25 5.15625 5.30175 5.15625 9.075C5.15625 14.1938 11.9813 21.75 11.9813 21.75C11.9813 21.75 18.8063 14.1938 18.8063 9.075C18.8063 5.30175 15.7545 2.25 11.9813 2.25ZM11.9813 11.5125C13.3274 11.5125 14.4188 10.4212 14.4188 9.075C14.4188 7.72881 13.3274 6.6375 11.9813 6.6375C10.6351 6.6375 9.54376 7.72881 9.54376 9.075C9.54376 10.4212 10.6351 11.5125 11.9813 11.5125ZM11.9813 4.20001C9.29025 4.20001 7.10625 6.38401 7.10625 9.07501C7.10625 11.8538 9.95325 16.1048 11.9813 18.708C14.0483 16.0853 16.8563 11.883 16.8563 9.07501C16.8563 6.38401 14.6723 4.20001 11.9813 4.20001Z" />
-  </Svg>
+  </SVG>
 );