@mekari/pixel-icon - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

 {
   "name": "@mekari/pixel-icon",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Mekari Pixel | Icon component",
@@ -5,0 +5,0 @@ "homepage": "https://mekari.design/",

src/icon.js

 import { createStyledAttrsMixin } from '@mekari/pixel-utils'
 import { iconProps } from './utils/icon.props'
 import { css } from '@emotion/css'
-import { iconAssets } from './iconAssets'
 
-const fallbackIcon = iconAssets['fallback']
+const fallbackIcon = {
+  path: `<path xmlns="http://www.w3.org/2000/svg" d="M13.7166 5.7961L13.1591 6.29783L13.1591 6.29783L13.7166 5.7961ZM14.4898 6.6552L13.9323 7.15692L13.9323 7.15692L14.4898 6.6552ZM14.4898 13.3448L15.0473 13.8466L15.0473 13.8466L14.4898 13.3448ZM13.7166 14.2039L13.1591 13.7022L13.1591 13.7022L13.7166 14.2039ZM6.28365 14.2039L6.84112 13.7022L6.84112 13.7022L6.28365 14.2039ZM5.51046 13.3448L4.95299 13.8466L4.95299 13.8466L5.51046 13.3448ZM5.51046 6.6552L4.95299 6.15348L4.95299 6.15348L5.51046 6.6552ZM6.28365 5.7961L6.84112 6.29783L6.84112 6.29783L6.28365 5.7961ZM9.99564 12.5834C9.58143 12.5834 9.24564 12.9191 9.24564 13.3334C9.24564 13.7476 9.58143 14.0834 9.99564 14.0834V12.5834ZM10.0031 14.0834C10.4173 14.0834 10.7531 13.7476 10.7531 13.3334C10.7531 12.9191 10.4173 12.5834 10.0031 12.5834V14.0834ZM7.58345 8.75002C7.58345 9.16424 7.91924 9.50002 8.33345 9.50002C8.74767 9.50002 9.08345 9.16424 9.08345 8.75002H7.58345ZM9.46979 10.303C9.1769 10.5959 9.1769 11.0708 9.46979 11.3637C9.76268 11.6566 10.2376 11.6566 10.5305 11.3637L9.46979 10.303ZM13.1591 6.29783L13.9323 7.15692L15.0472 6.15347L14.2741 5.29438L13.1591 6.29783ZM13.9323 12.8431L13.1591 13.7022L14.2741 14.7057L15.0473 13.8466L13.9323 12.8431ZM6.84112 13.7022L6.06793 12.8431L4.95299 13.8466L5.72618 14.7057L6.84112 13.7022ZM6.06793 7.15692L6.84112 6.29783L5.72618 5.29438L4.95299 6.15348L6.06793 7.15692ZM6.06793 12.8431C5.33892 12.0331 4.84121 11.4779 4.51715 11.0093C4.20526 10.5582 4.11353 10.2686 4.11353 10H2.61353C2.61353 10.6908 2.87962 11.2784 3.28337 11.8624C3.67496 12.4287 4.25072 13.0663 4.95299 13.8466L6.06793 12.8431ZM4.95299 6.15348C4.25071 6.93378 3.67496 7.57135 3.28337 8.13768C2.87962 8.7216 2.61353 9.3093 2.61353 10H4.11353C4.11353 9.73141 4.20526 9.44185 4.51715 8.99078C4.8412 8.52212 5.33892 7.96694 6.06793 7.15692L4.95299 6.15348ZM13.1591 13.7022C12.2765 14.6829 11.6659 15.3587 11.1423 15.7992C10.6351 16.2259 10.3069 16.3462 10.0001 16.3462V17.8462C10.8068 17.8462 11.4691 17.4845 12.1079 16.9471C12.7303 16.4235 13.4213 15.6532 14.2741 14.7057L13.1591 13.7022ZM5.72618 14.7057C6.57893 15.6532 7.26991 16.4235 7.89231 16.9471C8.53117 17.4845 9.19348 17.8462 10.0001 17.8462V16.3462C9.69335 16.3462 9.36512 16.2259 8.85794 15.7992C8.3343 15.3587 7.72374 14.6829 6.84112 13.7022L5.72618 14.7057ZM13.9323 7.15692C14.6613 7.96694 15.159 8.52212 15.4831 8.99078C15.795 9.44185 15.8867 9.73141 15.8867 10H17.3867C17.3867 9.3093 17.1206 8.7216 16.7169 8.13768C16.3253 7.57134 15.7495 6.93378 15.0472 6.15347L13.9323 7.15692ZM15.0473 13.8466C15.7495 13.0663 16.3253 12.4287 16.7169 11.8624C17.1206 11.2784 17.3867 10.6908 17.3867 10H15.8867C15.8867 10.2686 15.795 10.5582 15.4831 11.0093C15.159 11.4779 14.6613 12.0331 13.9323 12.8431L15.0473 13.8466ZM14.2741 5.29438C13.4213 4.34688 12.7303 3.57655 12.1079 3.05295C11.4691 2.51552 10.8068 2.15381 10.0001 2.15381V3.65381C10.3069 3.65381 10.6351 3.77415 11.1423 4.20081C11.6659 4.64132 12.2765 5.31713 13.1591 6.29783L14.2741 5.29438ZM6.84112 6.29783C7.72374 5.31713 8.3343 4.64132 8.85794 4.20081C9.36512 3.77415 9.69335 3.65381 10.0001 3.65381V2.15381C9.19348 2.15381 8.53117 2.51552 7.89231 3.05296C7.26991 3.57655 6.57893 4.34688 5.72618 5.29438L6.84112 6.29783ZM9.99564 14.0834H10.0031V12.5834H9.99564V14.0834ZM9.08345 8.75002V8.33336H7.58345V8.75002H9.08345ZM10.6187 9.15413L9.46979 10.303L10.5305 11.3637L11.6794 10.2148L10.6187 9.15413ZM10.9168 8.33336V8.43446H12.4168V8.33336H10.9168ZM10.0001 7.41669C10.5064 7.41669 10.9168 7.8271 10.9168 8.33336H12.4168C12.4168 6.99867 11.3348 5.91669 10.0001 5.91669V7.41669ZM11.6794 10.2148C12.1515 9.74262 12.4168 9.10221 12.4168 8.43446H10.9168C10.9168 8.70439 10.8096 8.96326 10.6187 9.15413L11.6794 10.2148ZM9.08345 8.33336C9.08345 7.8271 9.49386 7.41669 10.0001 7.41669V5.91669C8.66543 5.91669 7.58345 6.99867 7.58345 8.33336H9.08345Z" fill="#626B79"/>`
+}
+
 const Svg = {
@@ -30,18 +32,26 @@ name: 'MekariIconSvg',
 
-// function getColor (color, theme) {
-//   let result = ''
-//   if (color) {
-//     const colors = color.split('.')
-//     if (colors.length === 1) {
-//       result = theme[colors[0]]
-//       if (typeof result === 'object') {
-//         result = result['500']
-//       }
-//     } else {
-//       result = theme[colors[0]][colors[1]]
-//     }
-//   }
-//   return result
-// }
+function convertToOutline (icon, color) {
+  if (!icon) return null
+  let _icon = { ...icon }
+  let path = _icon.path
+  // eslint-disable-next-line no-useless-escape
+  const fillRegex = /fill="\#?\w+"/gm
 
+  // eslint-disable-next-line no-useless-escape
+  const strokeRegex = /stroke="\#?\w+"/gm
+
+  const findFill = path.match(fillRegex)
+  if (findFill) {
+    path = path.replaceAll(fillRegex, 'fill=transparent ')
+  }
+
+  const findStroke = path.match(strokeRegex)
+  if (findStroke) {
+    path = path.replaceAll(strokeRegex, 'stroke=currentColor ')
+  }
+
+  _icon = { ..._icon, path }
+  return _icon
+}
+
 export const MpIcon = {
@@ -54,8 +64,23 @@ name: 'MpIcon',
       let icon
-      if (this.name) {
-        icon = this.$pixelIcons[this.name]
-      } else {
+
+      if (!this.name) {
         console.warn('[Pixel]: You need to provide the "name" or "use" prop to for the Icon component')
       }
+      icon = this.$pixelIcons[this.name]
+
       if (!icon) {
+        switch (this.variant) {
+          case 'outline':
+            icon = convertToOutline(this.$pixelIcons[this.name + '-duotone'], this.color)
+            break
+          case 'duotone':
+            icon = this.$pixelIcons[this.name + '-duotone']
+            break
+          case 'fill':
+            icon = this.$pixelIcons[this.name + '-fill']
+            break
+        }
+      }
+
+      if (!icon) {
         icon = fallbackIcon
@@ -97,3 +122,4 @@ }
         focusable: false,
-        fill: this.isDuotone ? `${this.color}.50` : 'none',
+        // fill: this.isDuotone ? `${this.color}.50` : 'none',
+        fill: 'none',
         ...this.computedAttrs
@@ -100,0 +126,0 @@ },

src/iconAssets.js

@@ -1,2 +0,2 @@
-import * as allIcons from '../assets'
+import * as allIcons from './assets'
 
@@ -3,0 +3,0 @@ const iconCategories = Object.keys(allIcons)

src/utils/icon.props.js

@@ -15,2 +15,6 @@ export const iconProps = {
   },
+  color: {
+    type: [String],
+    default: 'gray.600'
+  },
   size: {
@@ -20,10 +24,11 @@ type: [String, Number, Array],
   },
-  isDuotone: {
-    type: [Boolean],
-    default: false
-  },
-  color: {
-    type: [String],
-    default: 'gray.600'
+  variant: {
+    type: String,
+    default: 'outline'
   }
+  // isDuotone: {
+  //   type: [Boolean],
+  //   default: false
+  // },
+
   // fill: {
@@ -30,0 +35,0 @@ //   type: [String, Number, Array],

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1893495

increased by21.92%

Number of package files

20

increased by81.82%

Lines of code

10581

increased by23.54%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes