@coreui/icons-vue - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/CIcon.d.ts

@@ -66,22 +66,68 @@ import { PropType } from 'vue';
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    content?: unknown;
-    customClassName?: unknown;
-    icon?: unknown;
-    name?: unknown;
-    size?: unknown;
-    title?: unknown;
-    use?: unknown;
-} & {} & {
-    name?: string | undefined;
-    content?: string | unknown[] | undefined;
-    customClassName?: string | unknown[] | Record<string, any> | undefined;
-    icon?: string | string[] | undefined;
-    size?: string | undefined;
-    title?: string | undefined;
-    use?: string | undefined;
-}>, {
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Use `:icon="..."` instead of
+     *
+     * @deprecated since version 3.0
+     */
+    content: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: undefined;
+        required: false;
+    };
+    /**
+     * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
+     */
+    customClassName: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+        required: false;
+    };
+    /**
+     * Name of the icon placed in React object or SVG content.
+     */
+    icon: {
+        type: PropType<string | string[]>;
+        default: undefined;
+        required: false;
+    };
+    /**
+     * Use `icon="..."` instead of
+     *
+     * @deprecated since version 3.0
+     */
+    name: {
+        type: StringConstructor;
+        default: undefined;
+        required: false;
+    };
+    /**
+     * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+     */
+    size: {
+        type: StringConstructor;
+        default: undefined;
+        required: false;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Title tag content.
+     */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+        required: false;
+    };
+    /**
+     * If defined component will be rendered using 'use' tag.
+     */
+    use: {
+        type: StringConstructor;
+        default: undefined;
+        required: false;
+    };
+}>>, {
     name: string;
     content: string | unknown[];
-    customClassName: string | unknown[] | Record<string, any>;
+    customClassName: string | Record<string, any> | unknown[];
     icon: string | string[];
@@ -91,3 +137,3 @@ size: string;
     use: string;
-}>;
+}, {}>;
 export { CIcon };

dist/index.d.ts

 import { CIcon } from './CIcon';
-export { CIcon };
+import { CIconSvg } from './CIconSvg';
+export { CIcon, CIconSvg };
 export default CIcon;

dist/index.es.js

@@ -1,2 +0,2 @@
-import { defineComponent, inject, computed, h } from 'vue';
+import { defineComponent, inject, computed, h, cloneVNode } from 'vue';
 
@@ -129,3 +129,69 @@ const CIcon = defineComponent({
 
-export { CIcon, CIcon as default };
+const CIconSvg = defineComponent({
+    name: 'CIconSvg',
+    props: {
+        /**
+         * Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.
+         */
+        customClassName: [String, Array, Object],
+        /**
+         * The height attribute defines the vertical length of an icon.
+         */
+        height: Number,
+        /**
+         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+         */
+        size: {
+            type: String,
+            validator: (value) => {
+                return [
+                    'custom',
+                    'custom-size',
+                    'sm',
+                    'lg',
+                    'xl',
+                    'xxl',
+                    '3xl',
+                    '4xl',
+                    '5xl',
+                    '6xl',
+                    '7xl',
+                    '8xl',
+                    '9xl',
+                ].includes(value);
+            },
+        },
+        /**
+         * Title tag content.
+         */
+        title: String,
+        /**
+         * The width attribute defines the horizontal length of an icon.
+         */
+        width: Number,
+    },
+    setup(props, { attrs, slots }) {
+        return () => slots.default &&
+            slots.default().map((slot) => cloneVNode(slot, {
+                'aria-hidden': true,
+                class: [
+                    props.customClassName || [
+                        'icon',
+                        {
+                            [`icon-${props.size}`]: props.size,
+                            [`icon-custom-size`]: props.height || props.width,
+                        },
+                        attrs.class,
+                    ],
+                ],
+                height: props.height,
+                focusable: 'false',
+                role: 'img',
+                width: props.width,
+                ...attrs,
+            }));
+    },
+});
+
+export { CIcon, CIconSvg, CIcon as default };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -133,4 +133,71 @@ 'use strict';
 
+const CIconSvg = vue.defineComponent({
+    name: 'CIconSvg',
+    props: {
+        /**
+         * Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.
+         */
+        customClassName: [String, Array, Object],
+        /**
+         * The height attribute defines the vertical length of an icon.
+         */
+        height: Number,
+        /**
+         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+         */
+        size: {
+            type: String,
+            validator: (value) => {
+                return [
+                    'custom',
+                    'custom-size',
+                    'sm',
+                    'lg',
+                    'xl',
+                    'xxl',
+                    '3xl',
+                    '4xl',
+                    '5xl',
+                    '6xl',
+                    '7xl',
+                    '8xl',
+                    '9xl',
+                ].includes(value);
+            },
+        },
+        /**
+         * Title tag content.
+         */
+        title: String,
+        /**
+         * The width attribute defines the horizontal length of an icon.
+         */
+        width: Number,
+    },
+    setup(props, { attrs, slots }) {
+        return () => slots.default &&
+            slots.default().map((slot) => vue.cloneVNode(slot, {
+                'aria-hidden': true,
+                class: [
+                    props.customClassName || [
+                        'icon',
+                        {
+                            [`icon-${props.size}`]: props.size,
+                            [`icon-custom-size`]: props.height || props.width,
+                        },
+                        attrs.class,
+                    ],
+                ],
+                height: props.height,
+                focusable: 'false',
+                role: 'img',
+                width: props.width,
+                ...attrs,
+            }));
+    },
+});
+
 exports.CIcon = CIcon;
-exports["default"] = CIcon;
+exports.CIconSvg = CIconSvg;
+exports.default = CIcon;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@coreui/icons-vue",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Official Vue component for CoreUI Icons",
@@ -35,4 +35,3 @@ "keywords": [
   "scripts": {
-    "build": "rollup -c",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}'",
+    "build": "rollup --config",
     "test": "jest --coverage",
@@ -43,23 +42,18 @@ "test:clear": "jest --clearCache",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "@vue/compiler-sfc": "^3.2.20",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "@vue/test-utils": "^2.0.0-0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.19.1",
-    "jest": "^27.3.0",
-    "prettier": "^2.4.1",
-    "rollup": "^2.58.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/jest": "^29.5.12",
+    "@vue/compiler-sfc": "^3.4.33",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "29.2.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rollup": "^4.19.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.4.3",
-    "vue": "^3.2.20"
+    "ts-jest": "^29.2.3",
+    "typescript": "^5.5.4",
+    "vue": "^3.4.33",
+    "vue-types": "^5.1.3"
   },
@@ -66,0 +60,0 @@ "peerDependencies": {

src/index.ts

 import { CIcon } from './CIcon'
-export { CIcon }
+import { CIconSvg } from './CIconSvg'
+export { CIcon, CIconSvg }
 export default CIcon

No alert changes

Improved metrics

Total package byte prevSize

39152

increased by43.7%

Dev dependency count

16

decreased by-23.81%

Number of package files

14

increased by16.67%

Lines of code

822

increased by57.77%

No dependency changes