@hugeicons/vue 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/cjs/components/HugeiconsIcon.vue.js +3 -5
- package/dist/cjs/components/HugeiconsIcon.vue.js.map +1 -1
- package/dist/cjs/components/HugeiconsIcon.vue2.js +12 -5
- package/dist/cjs/components/HugeiconsIcon.vue2.js.map +1 -1
- package/dist/esm/components/HugeiconsIcon.vue.js +3 -5
- package/dist/esm/components/HugeiconsIcon.vue.js.map +1 -1
- package/dist/esm/components/HugeiconsIcon.vue2.js +12 -5
- package/dist/esm/components/HugeiconsIcon.vue2.js.map +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
|
|
7
7
|
## What is HugeIcons?
|
|
8
8
|
|
|
9
|
-
HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,
|
|
9
|
+
HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,400+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 40,000 icons across 9 unique styles.
|
|
10
10
|
|
|
11
11
|
### Key Highlights
|
|
12
|
-
- **4,
|
|
12
|
+
- **4,400+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
|
|
13
13
|
- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
|
|
14
14
|
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
|
|
15
15
|
- **Regular Updates**: New icons added regularly to keep up with evolving design trends
|
|
@@ -267,7 +267,7 @@ The library supports all modern browsers.
|
|
|
267
267
|
|
|
268
268
|
## Pro Version
|
|
269
269
|
|
|
270
|
-
> 🌟 **Want access to
|
|
270
|
+
> 🌟 **Want access to 40,000+ icons and 9 unique styles?**
|
|
271
271
|
> Check out our [Pro Version](https://hugeicons.com/pricing) and visit [docs.hugeicons.com](https://docs.hugeicons.com) for comprehensive documentation.
|
|
272
272
|
|
|
273
273
|
### Available Pro Styles
|
|
@@ -6,7 +6,7 @@ var HugeiconsIcon_vue_vue_type_script_lang = require('./HugeiconsIcon.vue2.js');
|
|
|
6
6
|
var vue = require('vue');
|
|
7
7
|
var _pluginVue_exportHelper = require('../_virtual/_plugin-vue_export-helper.js');
|
|
8
8
|
|
|
9
|
-
const _hoisted_1 = ["width", "height", "color"
|
|
9
|
+
const _hoisted_1 = ["width", "height", "color"];
|
|
10
10
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
11
11
|
return vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps({
|
|
12
12
|
width: _ctx.computedSize,
|
|
@@ -14,9 +14,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
14
14
|
viewBox: `0 0 24 24`,
|
|
15
15
|
xmlns: "http://www.w3.org/2000/svg",
|
|
16
16
|
fill: "none",
|
|
17
|
-
color: _ctx.color
|
|
18
|
-
"stroke-width": _ctx.calculatedStrokeWidth,
|
|
19
|
-
stroke: _ctx.calculatedStrokeWidth !== void 0 ? "currentColor" : void 0
|
|
17
|
+
color: _ctx.color
|
|
20
18
|
}, _ctx.$attrs), [
|
|
21
19
|
(vue.openBlock(true), vue.createElementBlock(
|
|
22
20
|
vue.Fragment,
|
|
@@ -27,7 +25,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
27
25
|
vue.mergeProps({
|
|
28
26
|
key: index,
|
|
29
27
|
ref_for: true
|
|
30
|
-
}, _ctx.transformAttrs(element[1])),
|
|
28
|
+
}, _ctx.transformAttrs(element[1], _ctx.calculatedStrokeWidth)),
|
|
31
29
|
null,
|
|
32
30
|
16
|
|
33
31
|
/* FULL_PROPS */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HugeiconsIcon.vue.js","sources":["../../../src/components/HugeiconsIcon.vue"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n
|
|
1
|
+
{"version":3,"file":"HugeiconsIcon.vue.js","sources":["../../../src/components/HugeiconsIcon.vue"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n v-bind=\"$attrs\"\n >\n <template v-for=\"(element, index) in currentIcon\" :key=\"index\">\n <component\n :is=\"element[0]\"\n v-bind=\"transformAttrs(element[1], calculatedStrokeWidth)\"\n />\n </template>\n </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, computed } from 'vue';\n\nexport default defineComponent({\n name: 'HugeiconsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n required: true\n },\n size: {\n type: [Number, String],\n default: 24,\n validator(value: number | string) {\n const size = typeof value === 'string' ? parseInt(value, 10) : value;\n return !isNaN(size) && size > 0;\n }\n },\n strokeWidth: {\n type: Number,\n default: undefined\n },\n absoluteStrokeWidth: {\n type: Boolean,\n default: false\n },\n altIcon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n default: undefined\n },\n showAlt: {\n type: Boolean,\n default: false\n },\n color: {\n type: String,\n default: 'currentColor'\n }\n },\n setup(props) {\n const computedSize = computed(() => {\n const size = typeof props.size === 'string' ? parseInt(props.size, 10) : props.size;\n return !isNaN(size) && size > 0 ? size : 24;\n });\n\n const calculatedStrokeWidth = computed(() => {\n if (props.strokeWidth === undefined) return undefined;\n return props.absoluteStrokeWidth \n ? (props.strokeWidth * 24) / computedSize.value \n : props.strokeWidth;\n });\n\n const currentIcon = computed(() => {\n return props.altIcon && props.showAlt ? props.altIcon : props.icon;\n });\n\n const transformAttrs = (attrs: Record<string, any>, strokeWidth?: number) => {\n const result: Record<string, any> = {};\n for (const [key, value] of Object.entries(attrs)) {\n const kebabKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n result[kebabKey] = value;\n }\n\n // Add stroke properties to child elements if strokeWidth is defined\n if (strokeWidth !== undefined) {\n result['stroke-width'] = strokeWidth;\n result['stroke'] = 'currentColor';\n }\n\n return result;\n };\n\n return {\n computedSize,\n calculatedStrokeWidth,\n transformAttrs,\n currentIcon\n };\n }\n});\n</script> "],"names":["computedSize","_openBlock","_createElementBlock","_mergeProps","color","$attrs","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","transformAttrs"],"mappings":";;;;;;;;;AAEU,SAAA,WAAA,CAAEA,IAAY,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACb,EAAA,OAAAC,aAAA,EAAc,EAAAC,sBAAA,CAAA,KAAA,EAAAC,cAAA,CAAA;AAAA,IACpB,OAAO,IAAE,CAAA,YAAA;AAAA,IACV,MAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,OAAK,EAAA,CAAA,SAAA,CAAA;AAAA,IACJ,KAAOC,EAAAA,4BAAAA;AAAAA,IACAC,IAAAA,EAAAA,MAAAA;AAAAA,IAAAA,KAAAA,EAAAA,IAAAA,CAAAA,KAAAA;;mBAEgD,IAAK,CAAA,EAAAH,sBAAA;AAAA,MAAAI,YAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,cAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,OAAA,EAAA,KAAA,KAAA;AAVjE,QAAA,OAAAN,aAAA,EAAA,EAAAO,eAAA;AAAA,UAAAC,2BAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,UAAAN,cAAA,CAAA;AAAA,YAagBO,GAAAA,EAAAA,KAAAA;AAAAA,YAAAA,OAAAA,EAAAA,IAAAA;AAbhB,WAAA,EAAA,IAAA,CAAA,cAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,qBAAA,CAAA,CAAA;AAAA,UAAA,IAAA;AAAA,UAAA,EAAA;AAAA;AAAA,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
|
|
@@ -58,12 +58,19 @@ var _sfc_main = vue.defineComponent({
|
|
|
58
58
|
return props.altIcon && props.showAlt ? props.altIcon : props.icon;
|
|
59
59
|
});
|
|
60
60
|
|
|
61
|
-
const transformAttrs = (attrs) => {
|
|
62
|
-
const result = {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
const transformAttrs = (attrs, strokeWidth) => {
|
|
62
|
+
const result = {};
|
|
63
|
+
for (const [key, value] of Object.entries(attrs)) {
|
|
64
|
+
const kebabKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
|
|
65
|
+
result[kebabKey] = value;
|
|
66
66
|
}
|
|
67
|
+
|
|
68
|
+
// Add stroke properties to child elements if strokeWidth is defined
|
|
69
|
+
if (strokeWidth !== undefined) {
|
|
70
|
+
result['stroke-width'] = strokeWidth;
|
|
71
|
+
result['stroke'] = 'currentColor';
|
|
72
|
+
}
|
|
73
|
+
|
|
67
74
|
return result;
|
|
68
75
|
};
|
|
69
76
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HugeiconsIcon.vue2.js","sources":["../../../src/components/HugeiconsIcon.vue"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n
|
|
1
|
+
{"version":3,"file":"HugeiconsIcon.vue2.js","sources":["../../../src/components/HugeiconsIcon.vue"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n v-bind=\"$attrs\"\n >\n <template v-for=\"(element, index) in currentIcon\" :key=\"index\">\n <component\n :is=\"element[0]\"\n v-bind=\"transformAttrs(element[1], calculatedStrokeWidth)\"\n />\n </template>\n </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, computed } from 'vue';\n\nexport default defineComponent({\n name: 'HugeiconsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n required: true\n },\n size: {\n type: [Number, String],\n default: 24,\n validator(value: number | string) {\n const size = typeof value === 'string' ? parseInt(value, 10) : value;\n return !isNaN(size) && size > 0;\n }\n },\n strokeWidth: {\n type: Number,\n default: undefined\n },\n absoluteStrokeWidth: {\n type: Boolean,\n default: false\n },\n altIcon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n default: undefined\n },\n showAlt: {\n type: Boolean,\n default: false\n },\n color: {\n type: String,\n default: 'currentColor'\n }\n },\n setup(props) {\n const computedSize = computed(() => {\n const size = typeof props.size === 'string' ? parseInt(props.size, 10) : props.size;\n return !isNaN(size) && size > 0 ? size : 24;\n });\n\n const calculatedStrokeWidth = computed(() => {\n if (props.strokeWidth === undefined) return undefined;\n return props.absoluteStrokeWidth \n ? (props.strokeWidth * 24) / computedSize.value \n : props.strokeWidth;\n });\n\n const currentIcon = computed(() => {\n return props.altIcon && props.showAlt ? props.altIcon : props.icon;\n });\n\n const transformAttrs = (attrs: Record<string, any>, strokeWidth?: number) => {\n const result: Record<string, any> = {};\n for (const [key, value] of Object.entries(attrs)) {\n const kebabKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n result[kebabKey] = value;\n }\n\n // Add stroke properties to child elements if strokeWidth is defined\n if (strokeWidth !== undefined) {\n result['stroke-width'] = strokeWidth;\n result['stroke'] = 'currentColor';\n }\n\n return result;\n };\n\n return {\n computedSize,\n calculatedStrokeWidth,\n transformAttrs,\n currentIcon\n };\n }\n});\n</script> "],"names":["defineComponent","computed"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import _sfc_main from './HugeiconsIcon.vue2.js';
|
|
|
2
2
|
import { openBlock, createElementBlock, mergeProps, Fragment, renderList, createBlock, resolveDynamicComponent } from 'vue';
|
|
3
3
|
import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
|
|
4
4
|
|
|
5
|
-
const _hoisted_1 = ["width", "height", "color"
|
|
5
|
+
const _hoisted_1 = ["width", "height", "color"];
|
|
6
6
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
7
7
|
return openBlock(), createElementBlock("svg", mergeProps({
|
|
8
8
|
width: _ctx.computedSize,
|
|
@@ -10,9 +10,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
10
10
|
viewBox: `0 0 24 24`,
|
|
11
11
|
xmlns: "http://www.w3.org/2000/svg",
|
|
12
12
|
fill: "none",
|
|
13
|
-
color: _ctx.color
|
|
14
|
-
"stroke-width": _ctx.calculatedStrokeWidth,
|
|
15
|
-
stroke: _ctx.calculatedStrokeWidth !== void 0 ? "currentColor" : void 0
|
|
13
|
+
color: _ctx.color
|
|
16
14
|
}, _ctx.$attrs), [
|
|
17
15
|
(openBlock(true), createElementBlock(
|
|
18
16
|
Fragment,
|
|
@@ -23,7 +21,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
23
21
|
mergeProps({
|
|
24
22
|
key: index,
|
|
25
23
|
ref_for: true
|
|
26
|
-
}, _ctx.transformAttrs(element[1])),
|
|
24
|
+
}, _ctx.transformAttrs(element[1], _ctx.calculatedStrokeWidth)),
|
|
27
25
|
null,
|
|
28
26
|
16
|
|
29
27
|
/* FULL_PROPS */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HugeiconsIcon.vue.js","sources":["../../../src/components/HugeiconsIcon.vue"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n
|
|
1
|
+
{"version":3,"file":"HugeiconsIcon.vue.js","sources":["../../../src/components/HugeiconsIcon.vue"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n v-bind=\"$attrs\"\n >\n <template v-for=\"(element, index) in currentIcon\" :key=\"index\">\n <component\n :is=\"element[0]\"\n v-bind=\"transformAttrs(element[1], calculatedStrokeWidth)\"\n />\n </template>\n </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, computed } from 'vue';\n\nexport default defineComponent({\n name: 'HugeiconsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n required: true\n },\n size: {\n type: [Number, String],\n default: 24,\n validator(value: number | string) {\n const size = typeof value === 'string' ? parseInt(value, 10) : value;\n return !isNaN(size) && size > 0;\n }\n },\n strokeWidth: {\n type: Number,\n default: undefined\n },\n absoluteStrokeWidth: {\n type: Boolean,\n default: false\n },\n altIcon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n default: undefined\n },\n showAlt: {\n type: Boolean,\n default: false\n },\n color: {\n type: String,\n default: 'currentColor'\n }\n },\n setup(props) {\n const computedSize = computed(() => {\n const size = typeof props.size === 'string' ? parseInt(props.size, 10) : props.size;\n return !isNaN(size) && size > 0 ? size : 24;\n });\n\n const calculatedStrokeWidth = computed(() => {\n if (props.strokeWidth === undefined) return undefined;\n return props.absoluteStrokeWidth \n ? (props.strokeWidth * 24) / computedSize.value \n : props.strokeWidth;\n });\n\n const currentIcon = computed(() => {\n return props.altIcon && props.showAlt ? props.altIcon : props.icon;\n });\n\n const transformAttrs = (attrs: Record<string, any>, strokeWidth?: number) => {\n const result: Record<string, any> = {};\n for (const [key, value] of Object.entries(attrs)) {\n const kebabKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n result[kebabKey] = value;\n }\n\n // Add stroke properties to child elements if strokeWidth is defined\n if (strokeWidth !== undefined) {\n result['stroke-width'] = strokeWidth;\n result['stroke'] = 'currentColor';\n }\n\n return result;\n };\n\n return {\n computedSize,\n calculatedStrokeWidth,\n transformAttrs,\n currentIcon\n };\n }\n});\n</script> "],"names":["computedSize","_openBlock","_createElementBlock","_mergeProps","color","$attrs","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","transformAttrs"],"mappings":";;;;;AAEU,SAAA,WAAA,CAAEA,IAAY,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACb,EAAA,OAAAC,SAAA,EAAc,EAAAC,kBAAA,CAAA,KAAA,EAAAC,UAAA,CAAA;AAAA,IACpB,OAAO,IAAE,CAAA,YAAA;AAAA,IACV,MAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,OAAK,EAAA,CAAA,SAAA,CAAA;AAAA,IACJ,KAAOC,EAAAA,4BAAAA;AAAAA,IACAC,IAAAA,EAAAA,MAAAA;AAAAA,IAAAA,KAAAA,EAAAA,IAAAA,CAAAA,KAAAA;;eAEgD,IAAK,CAAA,EAAAH,kBAAA;AAAA,MAAAI,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,OAAA,EAAA,KAAA,KAAA;AAVjE,QAAA,OAAAN,SAAA,EAAA,EAAAO,WAAA;AAAA,UAAAC,uBAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,UAAAN,UAAA,CAAA;AAAA,YAagBO,GAAAA,EAAAA,KAAAA;AAAAA,YAAAA,OAAAA,EAAAA,IAAAA;AAbhB,WAAA,EAAA,IAAA,CAAA,cAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,qBAAA,CAAA,CAAA;AAAA,UAAA,IAAA;AAAA,UAAA,EAAA;AAAA;AAAA,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
|
|
@@ -54,12 +54,19 @@ var _sfc_main = defineComponent({
|
|
|
54
54
|
return props.altIcon && props.showAlt ? props.altIcon : props.icon;
|
|
55
55
|
});
|
|
56
56
|
|
|
57
|
-
const transformAttrs = (attrs) => {
|
|
58
|
-
const result = {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
const transformAttrs = (attrs, strokeWidth) => {
|
|
58
|
+
const result = {};
|
|
59
|
+
for (const [key, value] of Object.entries(attrs)) {
|
|
60
|
+
const kebabKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
|
|
61
|
+
result[kebabKey] = value;
|
|
62
62
|
}
|
|
63
|
+
|
|
64
|
+
// Add stroke properties to child elements if strokeWidth is defined
|
|
65
|
+
if (strokeWidth !== undefined) {
|
|
66
|
+
result['stroke-width'] = strokeWidth;
|
|
67
|
+
result['stroke'] = 'currentColor';
|
|
68
|
+
}
|
|
69
|
+
|
|
63
70
|
return result;
|
|
64
71
|
};
|
|
65
72
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HugeiconsIcon.vue2.js","sources":["../../../src/components/HugeiconsIcon.vue"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n
|
|
1
|
+
{"version":3,"file":"HugeiconsIcon.vue2.js","sources":["../../../src/components/HugeiconsIcon.vue"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n v-bind=\"$attrs\"\n >\n <template v-for=\"(element, index) in currentIcon\" :key=\"index\">\n <component\n :is=\"element[0]\"\n v-bind=\"transformAttrs(element[1], calculatedStrokeWidth)\"\n />\n </template>\n </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, computed } from 'vue';\n\nexport default defineComponent({\n name: 'HugeiconsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n required: true\n },\n size: {\n type: [Number, String],\n default: 24,\n validator(value: number | string) {\n const size = typeof value === 'string' ? parseInt(value, 10) : value;\n return !isNaN(size) && size > 0;\n }\n },\n strokeWidth: {\n type: Number,\n default: undefined\n },\n absoluteStrokeWidth: {\n type: Boolean,\n default: false\n },\n altIcon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n default: undefined\n },\n showAlt: {\n type: Boolean,\n default: false\n },\n color: {\n type: String,\n default: 'currentColor'\n }\n },\n setup(props) {\n const computedSize = computed(() => {\n const size = typeof props.size === 'string' ? parseInt(props.size, 10) : props.size;\n return !isNaN(size) && size > 0 ? size : 24;\n });\n\n const calculatedStrokeWidth = computed(() => {\n if (props.strokeWidth === undefined) return undefined;\n return props.absoluteStrokeWidth \n ? (props.strokeWidth * 24) / computedSize.value \n : props.strokeWidth;\n });\n\n const currentIcon = computed(() => {\n return props.altIcon && props.showAlt ? props.altIcon : props.icon;\n });\n\n const transformAttrs = (attrs: Record<string, any>, strokeWidth?: number) => {\n const result: Record<string, any> = {};\n for (const [key, value] of Object.entries(attrs)) {\n const kebabKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n result[kebabKey] = value;\n }\n\n // Add stroke properties to child elements if strokeWidth is defined\n if (strokeWidth !== undefined) {\n result['stroke-width'] = strokeWidth;\n result['stroke'] = 'currentColor';\n }\n\n return result;\n };\n\n return {\n computedSize,\n calculatedStrokeWidth,\n transformAttrs,\n currentIcon\n };\n }\n});\n</script> "],"names":[],"mappings":"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"}
|
package/dist/umd/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).HugeiconsVue={},e.Vue)}(this,(function(e,t){"use strict";var o=t.defineComponent({name:"HugeiconsIcon",inheritAttrs:!1,props:{icon:{type:Array,required:!0},size:{type:[Number,String],default:24,validator(e){const t="string"==typeof e?parseInt(e,10):e;return!isNaN(t)&&t>0}},strokeWidth:{type:Number,default:void 0},absoluteStrokeWidth:{type:Boolean,default:!1},altIcon:{type:Array,default:void 0},showAlt:{type:Boolean,default:!1},color:{type:String,default:"currentColor"}},setup(e){const o=t.computed((()=>{const t="string"==typeof e.size?parseInt(e.size,10):e.size;return!isNaN(t)&&t>0?t:24})),r=t.computed((()=>{if(void 0!==e.strokeWidth)return e.absoluteStrokeWidth?24*e.strokeWidth/o.value:e.strokeWidth})),n=t.computed((()=>e.altIcon&&e.showAlt?e.altIcon:e.icon));return{computedSize:o,calculatedStrokeWidth:r,transformAttrs:e=>{const
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).HugeiconsVue={},e.Vue)}(this,(function(e,t){"use strict";var o=t.defineComponent({name:"HugeiconsIcon",inheritAttrs:!1,props:{icon:{type:Array,required:!0},size:{type:[Number,String],default:24,validator(e){const t="string"==typeof e?parseInt(e,10):e;return!isNaN(t)&&t>0}},strokeWidth:{type:Number,default:void 0},absoluteStrokeWidth:{type:Boolean,default:!1},altIcon:{type:Array,default:void 0},showAlt:{type:Boolean,default:!1},color:{type:String,default:"currentColor"}},setup(e){const o=t.computed((()=>{const t="string"==typeof e.size?parseInt(e.size,10):e.size;return!isNaN(t)&&t>0?t:24})),r=t.computed((()=>{if(void 0!==e.strokeWidth)return e.absoluteStrokeWidth?24*e.strokeWidth/o.value:e.strokeWidth})),n=t.computed((()=>e.altIcon&&e.showAlt?e.altIcon:e.icon));return{computedSize:o,calculatedStrokeWidth:r,transformAttrs:(e,t)=>{const o={};for(const[t,r]of Object.entries(e)){o[t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()]=r}return void 0!==t&&(o["stroke-width"]=t,o.stroke="currentColor"),o},currentIcon:n}}});const r=["width","height","color"];var n=((e,t)=>{const o=e.__vccOpts||e;for(const[e,r]of t)o[e]=r;return o})(o,[["render",function(e,o,n,c,s,i){return t.openBlock(),t.createElementBlock("svg",t.mergeProps({width:e.computedSize,height:e.computedSize,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fill:"none",color:e.color},e.$attrs),[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.currentIcon,((o,r)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o[0]),t.mergeProps({key:r,ref_for:!0},e.transformAttrs(o[1],e.calculatedStrokeWidth)),null,16)))),128))],16,r)}],["__file","/Users/mac/Documents/Projects/Hugeicons/monorepo/hugeicons/packages/vue/src/components/HugeiconsIcon.vue"]]);const c={install:e=>{e.component("HugeiconsIcon",n)}};e.HugeiconsIcon=n,e.HugeiconsPlugin=c,e.default=c,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/umd/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/components/HugeiconsIcon.vue","../../src/index.ts"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/components/HugeiconsIcon.vue","../../src/index.ts"],"sourcesContent":["<template>\n <svg\n :width=\"computedSize\"\n :height=\"computedSize\"\n :viewBox=\"`0 0 24 24`\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n :color=\"color\"\n v-bind=\"$attrs\"\n >\n <template v-for=\"(element, index) in currentIcon\" :key=\"index\">\n <component\n :is=\"element[0]\"\n v-bind=\"transformAttrs(element[1], calculatedStrokeWidth)\"\n />\n </template>\n </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, computed } from 'vue';\n\nexport default defineComponent({\n name: 'HugeiconsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n required: true\n },\n size: {\n type: [Number, String],\n default: 24,\n validator(value: number | string) {\n const size = typeof value === 'string' ? parseInt(value, 10) : value;\n return !isNaN(size) && size > 0;\n }\n },\n strokeWidth: {\n type: Number,\n default: undefined\n },\n absoluteStrokeWidth: {\n type: Boolean,\n default: false\n },\n altIcon: {\n type: Array as PropType<[string, Record<string, any>][]>,\n default: undefined\n },\n showAlt: {\n type: Boolean,\n default: false\n },\n color: {\n type: String,\n default: 'currentColor'\n }\n },\n setup(props) {\n const computedSize = computed(() => {\n const size = typeof props.size === 'string' ? parseInt(props.size, 10) : props.size;\n return !isNaN(size) && size > 0 ? size : 24;\n });\n\n const calculatedStrokeWidth = computed(() => {\n if (props.strokeWidth === undefined) return undefined;\n return props.absoluteStrokeWidth \n ? (props.strokeWidth * 24) / computedSize.value \n : props.strokeWidth;\n });\n\n const currentIcon = computed(() => {\n return props.altIcon && props.showAlt ? props.altIcon : props.icon;\n });\n\n const transformAttrs = (attrs: Record<string, any>, strokeWidth?: number) => {\n const result: Record<string, any> = {};\n for (const [key, value] of Object.entries(attrs)) {\n const kebabKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n result[kebabKey] = value;\n }\n\n // Add stroke properties to child elements if strokeWidth is defined\n if (strokeWidth !== undefined) {\n result['stroke-width'] = strokeWidth;\n result['stroke'] = 'currentColor';\n }\n\n return result;\n };\n\n return {\n computedSize,\n calculatedStrokeWidth,\n transformAttrs,\n currentIcon\n };\n }\n});\n</script> ","import type { App } from 'vue';\nimport HugeiconsIcon from './components/HugeiconsIcon.vue';\n\nexport { default as HugeiconsIcon } from './components/HugeiconsIcon.vue';\nexport * from './types';\n\nexport const HugeiconsPlugin = {\n install: (app: App) => {\n app.component('HugeiconsIcon', HugeiconsIcon);\n }\n};\n\nexport default HugeiconsPlugin; "],"names":["_sfc_main","defineComponent","name","inheritAttrs","props","icon","type","Array","required","size","Number","String","default","validator","value","parseInt","isNaN","strokeWidth","undefined","absoluteStrokeWidth","Boolean","altIcon","showAlt","color","setup","computedSize","computed","calculatedStrokeWidth","currentIcon","transformAttrs","attrs","result","key","Object","entries","replace","toLowerCase","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_mergeProps","width","_ctx","height","viewBox","xmlns","$attrs","createElementBlock","_Fragment","Fragment","_renderList","element","index","_createBlock","createBlock","_resolveDynamicComponent","HugeiconsPlugin","install","app","component","HugeiconsIcon"],"mappings":"iRAsBA,IAAAA,EAAeC,kBAAgB,CAC7BC,KAAM,gBACNC,cAAc,EACdC,MAAO,CACLC,KAAM,CACJC,KAAMC,MACNC,UAAU,GAEZC,KAAM,CACJH,KAAM,CAACI,OAAQC,QACfC,QAAS,GACT,SAAAC,CAAUC,GACR,MAAML,EAAwB,iBAAVK,EAAqBC,SAASD,EAAO,IAAMA,EAC/D,OAAQE,MAAMP,IAASA,EAAO,CAChC,GAEFQ,YAAa,CACXX,KAAMI,OACNE,aAASM,GAEXC,oBAAqB,CACnBb,KAAMc,QACNR,SAAS,GAEXS,QAAS,CACPf,KAAMC,MACNK,aAASM,GAEXI,QAAS,CACPhB,KAAMc,QACNR,SAAS,GAEXW,MAAO,CACLjB,KAAMK,OACNC,QAAS,iBAGb,KAAAY,CAAMpB,GACJ,MAAMqB,EAAeC,EAAAA,UAAS,KAC5B,MAAMjB,EAA6B,iBAAfL,EAAMK,KAAoBM,SAASX,EAAMK,KAAM,IAAML,EAAMK,KAC/E,OAAQO,MAAMP,IAASA,EAAO,EAAIA,EAAO,EAAE,IAGvCkB,EAAwBD,EAAAA,UAAS,KACrC,QAA0BR,IAAtBd,EAAMa,YACV,OAAOb,EAAMe,oBACY,GAApBf,EAAMa,YAAoBQ,EAAaX,MACxCV,EAAMa,WAAW,IAGjBW,EAAcF,EAAAA,UAAS,IACpBtB,EAAMiB,SAAWjB,EAAMkB,QAAUlB,EAAMiB,QAAUjB,EAAMC,OAmBhE,MAAO,CACLoB,eACAE,wBACAE,eAnBqB,CAACC,EAA4Bb,KAClD,MAAMc,EAA8B,CAAA,EACpC,IAAK,MAAOC,EAAKlB,KAAUmB,OAAOC,QAAQJ,GAAQ,CAEhDC,EADiBC,EAAIG,QAAQ,qBAAsB,SAASC,eACzCtB,CACrB,CAQA,YALoBI,IAAhBD,IACFc,EAAO,gBAAkBd,EACzBc,EAAe,OAAI,gBAGdA,CAAM,EAObH,cAEJ,+HAhGQ,SAAEH,EAAYY,EAAAC,EAAAC,EAAAC,EAAAC,GACb,OAAAC,cAAcC,qBAAA,MAAAC,EAAAA,WAAA,CACpBC,MAAOC,EAAErB,aACVsB,OAAMD,EAAArB,aACNuB,QAAK,YACJC,MAAO1B,6BACA2B,KAAAA,OAAAA,MAAAA,EAAAA,gCAEgD,GAAKP,EAAAQ,mBAAAC,EAAAC,SAAA,KAAAC,EAAAA,WAAAR,EAAAlB,aAAA,CAAA2B,EAAAC,KAVjEd,EAAAA,YAAAe,EAAAC,YAAAC,0BAAAJ,EAAA,IAAAX,aAAA,CAagBf,IAAAA,EAAAA,SAAAA,GAbhBiB,EAAAjB,eAAA0B,EAAA,GAAAT,EAAAnB,wBAAA,KAAA,8ICMO,MAAMiC,EAAkB,CAC7BC,QAAUC,IACRA,EAAIC,UAAU,gBAAiBC,EAAc"}
|