@hugeicons/vue 1.0.2 → 1.0.4
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/CHANGELOG.md +22 -0
- package/LICENSE.md +21 -0
- package/PRO-LICENSE.md +14 -0
- package/README.md +57 -159
- package/dist/cjs/components/HugeiconsIcon.vue.js +4 -6
- 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 +4 -6
- 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 +31 -17
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# @hugeicons/vue
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
## 1.0.4
|
|
5
|
+
|
|
6
|
+
### Patch Changes
|
|
7
|
+
|
|
8
|
+
- Added "How It Works" section explaining the rendering library concept
|
|
9
|
+
- Standardized documentation structure across all framework packages
|
|
10
|
+
- Updated icon counts to 4,600+ free / 46,000+ pro
|
|
11
|
+
- Updated docs URL to hugeicons.com/docs
|
|
12
|
+
- Updated to use single image source from React repository
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## 1.0.0
|
|
16
|
+
|
|
17
|
+
### Major Changes
|
|
18
|
+
|
|
19
|
+
- Initial release
|
|
20
|
+
- Basic icon rendering functionality
|
|
21
|
+
- Support for customization (size, color, alternate icons)
|
|
22
|
+
- Full TypeScript support
|
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Hugeicons
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/PRO-LICENSE.md
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# Hugeicons Pro License
|
|
2
|
+
|
|
3
|
+
**Full license:** https://hugeicons.com/license-agreement
|
|
4
|
+
|
|
5
|
+
## Summary
|
|
6
|
+
|
|
7
|
+
Pro icon packs (`@hugeicons-pro/*`) require a valid Hugeicons Pro license.
|
|
8
|
+
|
|
9
|
+
* One seat per user who directly uses and accesses icons
|
|
10
|
+
* Cannot redistribute source files (License Key, SVG, fonts, Figma files, etc.—see the license for details)
|
|
11
|
+
* Cannot create competing icon products
|
|
12
|
+
* See more in the license page
|
|
13
|
+
|
|
14
|
+
For complete terms, seats, refunds, and legal details, see the full license above.
|
package/README.md
CHANGED
|
@@ -1,25 +1,36 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
# @hugeicons/vue
|
|
4
4
|
|
|
5
|
-
>
|
|
5
|
+
> Hugeicons Vue rendering library for fast, customizable icons with TypeScript and tree-shaking support
|
|
6
6
|
|
|
7
|
-
## What is
|
|
7
|
+
## What is Hugeicons?
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Hugeicons is a large icon set for modern web and mobile apps. The free package includes 4,600+ Stroke Rounded icons. The Pro package provides 46,000+ icons across 10 styles.
|
|
10
|
+
|
|
11
|
+
## How It Works
|
|
12
|
+
|
|
13
|
+
This package (`@hugeicons/vue`) is a **rendering library** - it provides the `HugeiconsIcon` component that displays icons in your Vue app. The icons themselves come from separate icon packages:
|
|
14
|
+
|
|
15
|
+
- **Free icons**: `@hugeicons/core-free-icons` (4,600+ icons)
|
|
16
|
+
- **Pro icons**: `@hugeicons-pro/core-*` packages (46,000+ icons, requires license)
|
|
10
17
|
|
|
11
18
|
### Key Highlights
|
|
12
|
-
- **4,
|
|
13
|
-
- **
|
|
19
|
+
- **4,600+ Free Icons**: Stroke Rounded set for unlimited personal and commercial projects
|
|
20
|
+
- **46,000+ Pro Icons, 10 Styles**: Stroke, Solid, Bulk, Duotone, and Twotone families for sharp, rounded, and standard needs with richer variants
|
|
21
|
+
- **Pixel Perfect Grid**: Built on a 24x24 grid for crisp rendering at any size
|
|
14
22
|
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
|
|
23
|
+
- **Tree Shaking Ready**: Named exports keep bundles lean in modern bundlers
|
|
15
24
|
- **Regular Updates**: New icons added regularly to keep up with evolving design trends
|
|
16
25
|
|
|
17
|
-
> 📚 **Looking for Pro Icons?** Check out our comprehensive documentation at [docs.hugeicons.com](https://docs.hugeicons.com) for detailed information about pro icons, styles, and advanced usage.
|
|
18
26
|
|
|
19
|
-
|
|
27
|
+
> **Looking for Pro Icons?** Check out our docs at [hugeicons.com/docs](https://hugeicons.com/docs) for detailed information about pro icons, styles, and advanced usage.
|
|
28
|
+
|
|
29
|
+
|
|
20
30
|
|
|
21
31
|
## Table of Contents
|
|
22
|
-
- [What is
|
|
32
|
+
- [What is Hugeicons?](#what-is-hugeicons)
|
|
33
|
+
- [How It Works](#how-it-works)
|
|
23
34
|
- [Features](#features)
|
|
24
35
|
- [Installation](#installation)
|
|
25
36
|
- [Usage](#usage)
|
|
@@ -27,7 +38,7 @@ HugeIcons is a comprehensive icon library designed for modern web and mobile app
|
|
|
27
38
|
- [Examples](#examples)
|
|
28
39
|
- [Basic Usage](#basic-usage)
|
|
29
40
|
- [Custom Size and Color](#custom-size-and-color)
|
|
30
|
-
- [
|
|
41
|
+
- [More examples and patterns](#more-examples-and-patterns)
|
|
31
42
|
- [Performance](#performance)
|
|
32
43
|
- [Troubleshooting](#troubleshooting)
|
|
33
44
|
- [Browser Support](#browser-support)
|
|
@@ -38,12 +49,12 @@ HugeIcons is a comprehensive icon library designed for modern web and mobile app
|
|
|
38
49
|
|
|
39
50
|
## Features
|
|
40
51
|
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
52
|
+
- Customizable colors, sizes, and stroke width
|
|
53
|
+
- TypeScript support with full type definitions
|
|
54
|
+
- Tree shakeable for optimal bundle size
|
|
55
|
+
- Multiple bundle formats (ESM, CJS, UMD)
|
|
56
|
+
- Vue 2 and Vue 3 compatible
|
|
57
|
+
- Alternate icon support for dynamic interactions
|
|
47
58
|
|
|
48
59
|
## Installation
|
|
49
60
|
|
|
@@ -73,58 +84,35 @@ bun add @hugeicons/vue @hugeicons/core-free-icons
|
|
|
73
84
|
/>
|
|
74
85
|
</template>
|
|
75
86
|
|
|
76
|
-
<script>
|
|
87
|
+
<script setup>
|
|
77
88
|
import { HugeiconsIcon } from '@hugeicons/vue';
|
|
78
89
|
import { SearchIcon } from '@hugeicons/core-free-icons';
|
|
79
|
-
|
|
80
|
-
export default {
|
|
81
|
-
components: {
|
|
82
|
-
HugeiconsIcon
|
|
83
|
-
},
|
|
84
|
-
setup() {
|
|
85
|
-
return {
|
|
86
|
-
SearchIcon
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
90
|
</script>
|
|
91
91
|
```
|
|
92
92
|
|
|
93
93
|
## Props
|
|
94
94
|
|
|
95
|
-
| Prop
|
|
96
|
-
|
|
97
|
-
| `icon` | `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
|
|
105
|
-
Note:
|
|
106
|
-
- The component accepts all standard SVG attributes as props which will be passed to the root SVG element.
|
|
107
|
-
- The `size` prop accepts both numbers and strings, but strings will be parsed to numbers and must result in a positive number.
|
|
108
|
-
- Icon arrays are tuples of `[elementName: string, attributes: Record<string, any>][]` representing SVG elements.
|
|
95
|
+
| Prop | Type | Default | Description |
|
|
96
|
+
|------|------|---------|-------------|
|
|
97
|
+
| `icon` | `IconArray` | Required | The main icon to display |
|
|
98
|
+
| `alt-icon` | `IconArray` | - | Alternative icon for states, interactions, or dynamic icon swapping |
|
|
99
|
+
| `show-alt` | `boolean` | `false` | When true, displays the altIcon instead of the main icon |
|
|
100
|
+
| `size` | `number \| string` | `24` | Icon size in pixels |
|
|
101
|
+
| `color` | `string` | `currentColor` | Icon color (CSS color value) |
|
|
102
|
+
| `stroke-width` | `number` | - | Width of the icon strokes |
|
|
103
|
+
| `absolute-stroke-width` | `boolean` | `false` | When true, the stroke width will be scaled relative to the icon size |
|
|
109
104
|
|
|
110
105
|
## Examples
|
|
111
106
|
|
|
112
107
|
### Basic Usage
|
|
113
108
|
```vue
|
|
114
109
|
<template>
|
|
115
|
-
<HugeiconsIcon :icon="
|
|
110
|
+
<HugeiconsIcon :icon="Video01Icon" />
|
|
116
111
|
</template>
|
|
117
112
|
|
|
118
|
-
<script>
|
|
113
|
+
<script setup>
|
|
119
114
|
import { HugeiconsIcon } from '@hugeicons/vue';
|
|
120
|
-
import {
|
|
121
|
-
|
|
122
|
-
export default {
|
|
123
|
-
components: { HugeiconsIcon },
|
|
124
|
-
setup() {
|
|
125
|
-
return { SearchIcon }
|
|
126
|
-
}
|
|
127
|
-
}
|
|
115
|
+
import { Video01Icon } from '@hugeicons/core-free-icons';
|
|
128
116
|
</script>
|
|
129
117
|
```
|
|
130
118
|
|
|
@@ -138,99 +126,16 @@ export default {
|
|
|
138
126
|
/>
|
|
139
127
|
</template>
|
|
140
128
|
|
|
141
|
-
<script>
|
|
129
|
+
<script setup>
|
|
142
130
|
import { HugeiconsIcon } from '@hugeicons/vue';
|
|
143
131
|
import { NotificationIcon } from '@hugeicons/core-free-icons';
|
|
144
|
-
|
|
145
|
-
export default {
|
|
146
|
-
components: { HugeiconsIcon },
|
|
147
|
-
setup() {
|
|
148
|
-
return { NotificationIcon }
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
</script>
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
### Interactive Examples
|
|
155
|
-
|
|
156
|
-
#### Search Bar with Clear Button
|
|
157
|
-
```vue
|
|
158
|
-
<template>
|
|
159
|
-
<div>
|
|
160
|
-
<input
|
|
161
|
-
v-model="searchValue"
|
|
162
|
-
type="text"
|
|
163
|
-
placeholder="Search..."
|
|
164
|
-
/>
|
|
165
|
-
<HugeiconsIcon
|
|
166
|
-
:icon="SearchIcon"
|
|
167
|
-
:alt-icon="CloseCircleIcon"
|
|
168
|
-
:show-alt="searchValue.length > 0"
|
|
169
|
-
@click="clearSearch"
|
|
170
|
-
/>
|
|
171
|
-
</div>
|
|
172
|
-
</template>
|
|
173
|
-
|
|
174
|
-
<script>
|
|
175
|
-
import { ref } from 'vue';
|
|
176
|
-
import { HugeiconsIcon } from '@hugeicons/vue';
|
|
177
|
-
import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';
|
|
178
|
-
|
|
179
|
-
export default {
|
|
180
|
-
components: { HugeiconsIcon },
|
|
181
|
-
setup() {
|
|
182
|
-
const searchValue = ref('');
|
|
183
|
-
|
|
184
|
-
const clearSearch = () => {
|
|
185
|
-
if (searchValue.value.length > 0) {
|
|
186
|
-
searchValue.value = '';
|
|
187
|
-
}
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
return {
|
|
191
|
-
searchValue,
|
|
192
|
-
clearSearch,
|
|
193
|
-
SearchIcon,
|
|
194
|
-
CloseCircleIcon
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
132
|
</script>
|
|
199
133
|
```
|
|
200
134
|
|
|
201
|
-
|
|
202
|
-
```vue
|
|
203
|
-
<template>
|
|
204
|
-
<button @click="toggleTheme">
|
|
205
|
-
<HugeiconsIcon
|
|
206
|
-
:icon="SunIcon"
|
|
207
|
-
:alt-icon="MoonIcon"
|
|
208
|
-
:show-alt="isDark"
|
|
209
|
-
/>
|
|
210
|
-
</button>
|
|
211
|
-
</template>
|
|
135
|
+
### More examples and patterns
|
|
212
136
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
import { HugeiconsIcon } from '@hugeicons/vue';
|
|
216
|
-
import { SunIcon, MoonIcon } from '@hugeicons/core-free-icons';
|
|
217
|
-
|
|
218
|
-
export default {
|
|
219
|
-
components: { HugeiconsIcon },
|
|
220
|
-
setup() {
|
|
221
|
-
const isDark = ref(false);
|
|
222
|
-
const toggleTheme = () => isDark.value = !isDark.value;
|
|
223
|
-
|
|
224
|
-
return {
|
|
225
|
-
isDark,
|
|
226
|
-
toggleTheme,
|
|
227
|
-
SunIcon,
|
|
228
|
-
MoonIcon
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
</script>
|
|
233
|
-
```
|
|
137
|
+
- Examples: https://hugeicons.com/docs/integrations/vue/examples
|
|
138
|
+
- Best practices: https://hugeicons.com/docs/integrations/vue/best-practices
|
|
234
139
|
|
|
235
140
|
## Performance
|
|
236
141
|
|
|
@@ -261,14 +166,14 @@ The library supports all modern browsers.
|
|
|
261
166
|
## Related Packages
|
|
262
167
|
|
|
263
168
|
- [@hugeicons/react](https://www.npmjs.com/package/@hugeicons/react) - React component
|
|
264
|
-
- [@hugeicons/svelte](https://www.npmjs.com/package/@hugeicons/svelte) - Svelte component
|
|
265
169
|
- [@hugeicons/angular](https://www.npmjs.com/package/@hugeicons/angular) - Angular component
|
|
170
|
+
- [@hugeicons/svelte](https://www.npmjs.com/package/@hugeicons/svelte) - Svelte component
|
|
266
171
|
- [@hugeicons/react-native](https://www.npmjs.com/package/@hugeicons/react-native) - React Native component
|
|
267
172
|
|
|
268
173
|
## Pro Version
|
|
269
174
|
|
|
270
|
-
>
|
|
271
|
-
> Check out our [Pro Version](https://hugeicons.com/pricing) and visit [docs
|
|
175
|
+
> **Want access to 46,000+ icons and 10 unique styles?**
|
|
176
|
+
> Check out our [Pro Version](https://hugeicons.com/pricing) and visit our [docs](https://hugeicons.com/docs) for detailed documentation.
|
|
272
177
|
|
|
273
178
|
### Available Pro Styles
|
|
274
179
|
- **Stroke Styles**
|
|
@@ -282,29 +187,22 @@ The library supports all modern browsers.
|
|
|
282
187
|
- **Special Styles**
|
|
283
188
|
- Bulk Rounded (`@hugeicons-pro/core-bulk-rounded`)
|
|
284
189
|
- Duotone Rounded (`@hugeicons-pro/core-duotone-rounded`)
|
|
190
|
+
- Duotone Standard (`@hugeicons-pro/core-duotone-standard`)
|
|
285
191
|
- Twotone Rounded (`@hugeicons-pro/core-twotone-rounded`)
|
|
286
192
|
|
|
287
193
|
## License
|
|
288
194
|
|
|
289
|
-
|
|
195
|
+
The code in this package (`@hugeicons/vue`) is licensed under the MIT License.
|
|
290
196
|
|
|
291
|
-
|
|
197
|
+
This package only provides rendering utilities. It does not include or grant any rights to Hugeicons icon assets. Using Pro icon styles requires a valid Hugeicons Pro license.
|
|
292
198
|
|
|
293
|
-
|
|
294
|
-
-
|
|
199
|
+
Hugeicons icon packs are licensed separately:
|
|
200
|
+
- **Free icon packs**: use the license included with the specific free icon package you install.
|
|
201
|
+
- **Pro icon packs (`@hugeicons-pro/*`)**: require a paid Hugeicons Pro license and are governed by the Hugeicons Pro Terms (see [Pro License](PRO-LICENSE.md).).
|
|
295
202
|
|
|
296
|
-
## Changelog
|
|
297
203
|
|
|
298
|
-
|
|
299
|
-
- Fix: Remove stroke attribute from SVG when no stroke width is passed to improve icon rendering flexibility
|
|
300
|
-
|
|
301
|
-
### v1.0.1
|
|
302
|
-
- Added `absoluteStrokeWidth` prop for consistent stroke width scaling
|
|
303
|
-
- Improved stroke width handling by applying it at the SVG level
|
|
304
|
-
- Enhanced TypeScript types and documentation
|
|
204
|
+
## Related
|
|
305
205
|
|
|
306
|
-
|
|
307
|
-
-
|
|
308
|
-
-
|
|
309
|
-
- Support for customization (size, color, alternate icons)
|
|
310
|
-
- Full TypeScript support
|
|
206
|
+
- [Changelog](CHANGELOG.md) - Version history and release notes
|
|
207
|
+
- [@hugeicons/core-free-icons](https://www.npmjs.com/package/@hugeicons/core-free-icons) - Free icon package
|
|
208
|
+
- [Hugeicons Website](https://hugeicons.com) - Browse all available icons
|
|
@@ -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 */
|
|
@@ -38,7 +36,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
38
36
|
))
|
|
39
37
|
], 16, _hoisted_1);
|
|
40
38
|
}
|
|
41
|
-
var HugeiconsIcon = /* @__PURE__ */ _pluginVue_exportHelper.default(HugeiconsIcon_vue_vue_type_script_lang.default, [["render", _sfc_render], ["__file", "/Users/
|
|
39
|
+
var HugeiconsIcon = /* @__PURE__ */ _pluginVue_exportHelper.default(HugeiconsIcon_vue_vue_type_script_lang.default, [["render", _sfc_render], ["__file", "/Users/mahmudulhasan/Desktop/Projects/Hugeicons/packages/vue/src/components/HugeiconsIcon.vue"]]);
|
|
42
40
|
|
|
43
41
|
exports.default = HugeiconsIcon;
|
|
44
42
|
//# sourceMappingURL=HugeiconsIcon.vue.js.map
|
|
@@ -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","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;;;;AAGjDC,YAAAA,GAAAA,EAAAA,KAAAA;AAAAA,YAAAA,OAAAA,EAAAA,IAAAA;;;;;;;;;;;;;;;;"}
|
|
@@ -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 */
|
|
@@ -34,7 +32,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
34
32
|
))
|
|
35
33
|
], 16, _hoisted_1);
|
|
36
34
|
}
|
|
37
|
-
var HugeiconsIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/
|
|
35
|
+
var HugeiconsIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/mahmudulhasan/Desktop/Projects/Hugeicons/packages/vue/src/components/HugeiconsIcon.vue"]]);
|
|
38
36
|
|
|
39
37
|
export { HugeiconsIcon as default };
|
|
40
38
|
//# sourceMappingURL=HugeiconsIcon.vue.js.map
|
|
@@ -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","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;;;;AAGjDC,YAAAA,GAAAA,EAAAA,KAAAA;AAAAA,YAAAA,OAAAA,EAAAA,IAAAA;;;;;;;;;;;;;;;;"}
|
|
@@ -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,
|
|
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,s,c,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/mahmudulhasan/Desktop/Projects/Hugeicons/packages/vue/src/components/HugeiconsIcon.vue"]]);const s={install:e=>{e.component("HugeiconsIcon",n)}};e.HugeiconsIcon=n,e.HugeiconsPlugin=s,e.default=s,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","HugeiconsPlugin","install","app","component","HugeiconsIcon"],"mappings":"gRAsBA,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,SAAS,KAC5B,MAAMjB,EAA6B,iBAAfL,EAAMK,KAAoBM,SAASX,EAAMK,KAAM,IAAML,EAAMK,KAC/E,OAAQO,MAAMP,IAASA,EAAO,EAAIA,EAAO,KAGrCkB,EAAwBD,EAAAA,SAAS,KACrC,QAA0BR,IAAtBd,EAAMa,YACV,OAAOb,EAAMe,oBACY,GAApBf,EAAMa,YAAoBQ,EAAaX,MACxCV,EAAMa,cAGNW,EAAcF,EAAAA,SAAS,IACpBtB,EAAMiB,SAAWjB,EAAMkB,QAAUlB,EAAMiB,QAAUjB,EAAMC,MAmBhE,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,GAOPH,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,YAAA,CAAA2B,EAAAC,+EAGjD3B,IAAAA,EAAAA,SAAAA,0LCPT,MAAM4B,EAAkB,CAC7BC,QAAUC,IACRA,EAAIC,UAAU,gBAAiBC"}
|
package/package.json
CHANGED
|
@@ -1,16 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hugeicons/vue",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.4",
|
|
4
|
+
"description": "Hugeicons Vue Component Library https://hugeicons.com",
|
|
5
5
|
"homepage": "https://hugeicons.com",
|
|
6
|
+
"license": "MIT",
|
|
6
7
|
"main": "./dist/cjs/index.js",
|
|
7
8
|
"module": "./dist/esm/index.js",
|
|
8
9
|
"unpkg": "./dist/umd/index.js",
|
|
9
10
|
"types": "./dist/types/index.d.ts",
|
|
10
11
|
"sideEffects": false,
|
|
11
12
|
"files": [
|
|
12
|
-
"dist"
|
|
13
|
+
"dist",
|
|
14
|
+
"CHANGELOG.md",
|
|
15
|
+
"LICENSE.md",
|
|
16
|
+
"PRO-LICENSE.md",
|
|
17
|
+
"README.md"
|
|
13
18
|
],
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "git+https://github.com/hugeicons/vue.git"
|
|
22
|
+
},
|
|
23
|
+
"bugs": {
|
|
24
|
+
"url": "https://github.com/hugeicons/vue/issues"
|
|
25
|
+
},
|
|
14
26
|
"exports": {
|
|
15
27
|
".": {
|
|
16
28
|
"types": "./dist/types/index.d.ts",
|
|
@@ -18,6 +30,15 @@
|
|
|
18
30
|
"require": "./dist/cjs/index.js"
|
|
19
31
|
}
|
|
20
32
|
},
|
|
33
|
+
"author": "Hugeicons",
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build": "pnpm clean && pnpm typecheck && pnpm build:bundles",
|
|
36
|
+
"build:bundles": "rollup -c ./rollup.config.mjs",
|
|
37
|
+
"typecheck": "tsc --noEmit",
|
|
38
|
+
"clean": "rm -rf dist",
|
|
39
|
+
"publish:beta": "pnpm build && npm publish --tag beta --no-git-checks",
|
|
40
|
+
"publish:prod": "pnpm build && npm publish --no-git-checks"
|
|
41
|
+
},
|
|
21
42
|
"devDependencies": {
|
|
22
43
|
"@rollup/plugin-commonjs": "^25.0.8",
|
|
23
44
|
"@rollup/plugin-node-resolve": "^15.3.1",
|
|
@@ -38,21 +59,14 @@
|
|
|
38
59
|
"vue": "^2.6.0 || ^3.0.0"
|
|
39
60
|
},
|
|
40
61
|
"keywords": [
|
|
62
|
+
"hugeicons",
|
|
63
|
+
"vue",
|
|
41
64
|
"icons",
|
|
42
65
|
"vue-icons",
|
|
43
|
-
"
|
|
44
|
-
"
|
|
66
|
+
"svg-icons",
|
|
67
|
+
"svg",
|
|
45
68
|
"vector-icons",
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
"customizable-icons",
|
|
50
|
-
"icon-library"
|
|
51
|
-
],
|
|
52
|
-
"scripts": {
|
|
53
|
-
"build": "pnpm clean && pnpm typecheck && pnpm build:bundles",
|
|
54
|
-
"build:bundles": "rollup -c ./rollup.config.mjs",
|
|
55
|
-
"typecheck": "tsc --noEmit",
|
|
56
|
-
"clean": "rm -rf dist"
|
|
57
|
-
}
|
|
69
|
+
"icon-library",
|
|
70
|
+
"typescript"
|
|
71
|
+
]
|
|
58
72
|
}
|