all data hide
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled

This commit is contained in:
2026-06-25 09:44:52 +07:00
parent 2f289fb09e
commit d26db06f74
20660 changed files with 1815162 additions and 41 deletions
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 creativeLabs Łukasz Holeczek
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+79
View File
@@ -0,0 +1,79 @@
<p align="center">
<a href="https://coreui.io/">
<img src="https://coreui.io/images/brand/coreui-icons.svg" alt="CoreUI Icons logo" height="50">
</a>
</p>
<p align="center">
Official Vue.js component for CoreUI Icons and CoreUI Icons PRO.
<br>
<a href="https://coreui.io/vue/docs/components/icon.html"><strong>Explore CoreUI Icons for Vue docs »</strong></a>
<br>
<br>
<a href="https://github.com/coreui/coreui-icons/issues/new?template=bug_report.md">Report bug</a>
·
<a href="https://github.com/coreui/coreui-icons/issues/new?template=feature_request.md">Request feature</a>
·
<a href="https://blog.coreui.io/">Blog</a>
</p>
## Status
[![NPM](https://img.shields.io/npm/v/@coreui/icons-vue/latest?style=flat-square&color=brightgreen)][coreui]
[![Downloads](https://img.shields.io/npm/dm/@coreui/icons-vue.svg?style=flat-square)][coreui]
[![License](https://img.shields.io/npm/l/@coreui/vue?style=flat-square)][coreui]
[coreui]: https://coreui.io/icons
## Installation
```bash
npm install @coreui/icons
npm install @coreui/icons-vue
```
or
```bash
yarn add @coreui/icons
yarn add @coreui/icons-vue
```
## Use
### Single icon
```jsx
import { CIcon } from '@coreui/icons-vue';
import { cifAu } from '@coreui/icons';
...
<CIcon :icon="cilAu" size="xxl"/>
...
```
### All icons
```jsx
import { CIcon } from '@coreui/icons-vue';
import * as icon from '@coreui/icons';
...
<CIcon :icon="icon.cilList" size="xxl"/>
...
```
## API
| property | type | description |
| --- | --- | --- |
| customClassName | `string` \| `object` \| `string[]` | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. |
| icon | `string` \| `string[]` | Name of the icon placed in React object or SVG content. |
| height | `number` | The height attribute defines the vertical length of an icon. |
| size | `sm` \| `md` \|`lg` \| `xl` \| `xxl` \| `3xl` \| `4xl` \| `5xl` \| `6xl` \| `7xl` \| `8xl` \| `9xl` | Size of the icon. |
| use | `string` | If defined component will be rendered using `use` tag. |
| title | `string` | Title tag content. |
| width | `number` | The width attribute defines the horizontal length of an icon. |
+137
View File
@@ -0,0 +1,137 @@
import { PropType } from 'vue';
declare const CIcon: import("vue").DefineComponent<{
/**
* 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;
};
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, 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 | Record<string, any> | unknown[];
icon: string | string[];
size: string;
title: string;
use: string;
}, {}>;
export { CIcon };
+52
View File
@@ -0,0 +1,52 @@
declare const CIconSvg: import("vue").DefineComponent<{
/**
* Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.
*/
customClassName: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
/**
* The height attribute defines the vertical length of an icon.
*/
height: NumberConstructor;
/**
* Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
*/
size: {
type: StringConstructor;
validator: (value: string) => boolean;
};
/**
* Title tag content.
*/
title: StringConstructor;
/**
* The width attribute defines the horizontal length of an icon.
*/
width: NumberConstructor;
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.
*/
customClassName: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
/**
* The height attribute defines the vertical length of an icon.
*/
height: NumberConstructor;
/**
* Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
*/
size: {
type: StringConstructor;
validator: (value: string) => boolean;
};
/**
* Title tag content.
*/
title: StringConstructor;
/**
* The width attribute defines the horizontal length of an icon.
*/
width: NumberConstructor;
}>>, {}, {}>;
export { CIconSvg };
+4
View File
@@ -0,0 +1,4 @@
import { CIcon } from './CIcon';
import { CIconSvg } from './CIconSvg';
export { CIcon, CIconSvg };
export default CIcon;
+203
View File
@@ -0,0 +1,203 @@
import { defineComponent, inject, ref, watch, computed, h, cloneVNode } from 'vue';
const CIcon = defineComponent({
name: 'CIcon',
props: {
/**
* Use `:icon="..."` instead of
*
* @deprecated since version 3.0
*/
content: {
type: [String, Array],
default: undefined,
required: false,
},
/**
* Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
*/
customClassName: {
type: [String, Array, Object],
default: undefined,
required: false,
},
/**
* Name of the icon placed in React object or SVG content.
*/
icon: {
type: [String, Array],
default: undefined,
required: false,
},
/**
* Use `icon="..."` instead of
*
* @deprecated since version 3.0
*/
name: {
type: String,
default: undefined,
required: false,
},
/**
* Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
*/
size: {
type: String,
default: undefined,
required: false,
validator: (value) => {
return [
'custom',
'custom-size',
'sm',
'lg',
'xl',
'xxl',
'3xl',
'4xl',
'5xl',
'6xl',
'7xl',
'8xl',
'9xl',
].includes(value);
},
},
/**
* Title tag content.
*/
title: {
type: String,
default: undefined,
required: false,
},
/**
* If defined component will be rendered using 'use' tag.
*/
use: {
type: String,
default: undefined,
required: false,
},
},
setup(props, { attrs }) {
const icons = inject('icons');
const _icon = ref(props.icon || props.content || props.name);
watch(() => props.icon, () => {
_icon.value = props.icon;
});
const toCamelCase = (str) => {
return str
.replace(/([-_][a-z0-9])/gi, ($1) => {
return $1.toUpperCase();
})
.replace(/-/gi, '');
};
const iconName = computed(() => _icon.value && typeof _icon.value === 'string'
? _icon.value.includes('-')
? toCamelCase(_icon.value)
: _icon.value
: '');
const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';
const code = computed(() => Array.isArray(_icon.value)
? _icon.value
: typeof _icon.value === 'string' && iconName.value && icons[iconName.value]
? icons[iconName.value]
: 'undefined');
const iconCode = computed(() => Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value);
const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';
const viewBox = attrs.viewBox || `0 0 ${scale}`;
const size = () => {
const addCustom = !props.size && (attrs.width || attrs.height);
return props.size === 'custom' || addCustom ? 'custom-size' : props.size;
};
const classNames = (() => {
return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class];
})();
return () => props.use
? h('svg', {
...attrs,
xmlns: 'http://www.w3.org/2000/svg',
class: classNames,
role: 'img',
}, h('use', { href: props.use }))
: h('svg', {
...attrs,
xmlns: 'http://www.w3.org/2000/svg',
class: classNames,
viewBox: viewBox,
innerHTML: `${titleCode}${iconCode.value}`,
role: 'img',
});
},
});
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
File diff suppressed because one or more lines are too long
+209
View File
@@ -0,0 +1,209 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
const CIcon = vue.defineComponent({
name: 'CIcon',
props: {
/**
* Use `:icon="..."` instead of
*
* @deprecated since version 3.0
*/
content: {
type: [String, Array],
default: undefined,
required: false,
},
/**
* Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
*/
customClassName: {
type: [String, Array, Object],
default: undefined,
required: false,
},
/**
* Name of the icon placed in React object or SVG content.
*/
icon: {
type: [String, Array],
default: undefined,
required: false,
},
/**
* Use `icon="..."` instead of
*
* @deprecated since version 3.0
*/
name: {
type: String,
default: undefined,
required: false,
},
/**
* Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
*/
size: {
type: String,
default: undefined,
required: false,
validator: (value) => {
return [
'custom',
'custom-size',
'sm',
'lg',
'xl',
'xxl',
'3xl',
'4xl',
'5xl',
'6xl',
'7xl',
'8xl',
'9xl',
].includes(value);
},
},
/**
* Title tag content.
*/
title: {
type: String,
default: undefined,
required: false,
},
/**
* If defined component will be rendered using 'use' tag.
*/
use: {
type: String,
default: undefined,
required: false,
},
},
setup(props, { attrs }) {
const icons = vue.inject('icons');
const _icon = vue.ref(props.icon || props.content || props.name);
vue.watch(() => props.icon, () => {
_icon.value = props.icon;
});
const toCamelCase = (str) => {
return str
.replace(/([-_][a-z0-9])/gi, ($1) => {
return $1.toUpperCase();
})
.replace(/-/gi, '');
};
const iconName = vue.computed(() => _icon.value && typeof _icon.value === 'string'
? _icon.value.includes('-')
? toCamelCase(_icon.value)
: _icon.value
: '');
const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';
const code = vue.computed(() => Array.isArray(_icon.value)
? _icon.value
: typeof _icon.value === 'string' && iconName.value && icons[iconName.value]
? icons[iconName.value]
: 'undefined');
const iconCode = vue.computed(() => Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value);
const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';
const viewBox = attrs.viewBox || `0 0 ${scale}`;
const size = () => {
const addCustom = !props.size && (attrs.width || attrs.height);
return props.size === 'custom' || addCustom ? 'custom-size' : props.size;
};
const classNames = (() => {
return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class];
})();
return () => props.use
? vue.h('svg', {
...attrs,
xmlns: 'http://www.w3.org/2000/svg',
class: classNames,
role: 'img',
}, vue.h('use', { href: props.use }))
: vue.h('svg', {
...attrs,
xmlns: 'http://www.w3.org/2000/svg',
class: classNames,
viewBox: viewBox,
innerHTML: `${titleCode}${iconCode.value}`,
role: 'img',
});
},
});
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.CIconSvg = CIconSvg;
exports.default = CIcon;
//# sourceMappingURL=index.js.map
File diff suppressed because one or more lines are too long
+61
View File
@@ -0,0 +1,61 @@
{
"name": "@coreui/icons-vue",
"version": "2.2.0",
"description": "Official Vue component for CoreUI Icons",
"keywords": [
"coreui",
"coreui-icons",
"coreui-vue",
"icons",
"svg",
"svg-icons",
"layout",
"component",
"vue"
],
"homepage": "https://icons.coreui.io",
"bugs": {
"url": "https://github.com/coreui/coreui-icons/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/coreui/coreui-icons.git"
},
"license": "MIT",
"author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"types": "dist/index.d.ts",
"files": [
"dist/",
"src/"
],
"scripts": {
"build": "rollup --config",
"test": "jest --coverage",
"test:clear": "jest --clearCache",
"test:update": "jest --coverage --updateSnapshot"
},
"devDependencies": {
"@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.38",
"@vue/test-utils": "^2.4.6",
"@vue/vue3-jest": "29.2.6",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"rollup": "^4.21.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-vue": "^6.0.0",
"ts-jest": "^29.2.5",
"typescript": "^5.5.4",
"vue": "^3.4.38",
"vue-types": "^5.1.3"
},
"peerDependencies": {
"vue": "^3.2.20"
}
}
+160
View File
@@ -0,0 +1,160 @@
import { computed, defineComponent, h, inject, PropType, ref, watch } from 'vue'
const CIcon = defineComponent({
name: 'CIcon',
props: {
/**
* Use `:icon="..."` instead of
*
* @deprecated since version 3.0
*/
content: {
type: [String, Array],
default: undefined,
required: false,
},
/**
* Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
*/
customClassName: {
type: [String, Array, Object],
default: undefined,
required: false,
},
/**
* Name of the icon placed in React object or SVG content.
*/
icon: {
type: [String, Array] as PropType<string | string[]>,
default: undefined,
required: false,
},
/**
* Use `icon="..."` instead of
*
* @deprecated since version 3.0
*/
name: {
type: String,
default: undefined,
required: false,
},
/**
* Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
*/
size: {
type: String,
default: undefined,
required: false,
validator: (value: string) => {
return [
'custom',
'custom-size',
'sm',
'lg',
'xl',
'xxl',
'3xl',
'4xl',
'5xl',
'6xl',
'7xl',
'8xl',
'9xl',
].includes(value)
},
},
/**
* Title tag content.
*/
title: {
type: String,
default: undefined,
required: false,
},
/**
* If defined component will be rendered using 'use' tag.
*/
use: {
type: String,
default: undefined,
required: false,
},
},
setup(props, { attrs }) {
const icons: any = inject('icons')
const _icon = ref(props.icon || props.content || props.name)
watch(
() => props.icon,
() => {
_icon.value = props.icon
},
)
const toCamelCase = (str: string) => {
return str
.replace(/([-_][a-z0-9])/gi, ($1) => {
return $1.toUpperCase()
})
.replace(/-/gi, '')
}
const iconName = computed(() =>
_icon.value && typeof _icon.value === 'string'
? _icon.value.includes('-')
? toCamelCase(_icon.value)
: _icon.value
: '',
)
const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined'
const code = computed(() =>
Array.isArray(_icon.value)
? _icon.value
: typeof _icon.value === 'string' && iconName.value && icons[iconName.value]
? icons[iconName.value]
: 'undefined',
)
const iconCode = computed(() =>
Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value,
)
const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64'
const viewBox = attrs.viewBox || `0 0 ${scale}`
const size = () => {
const addCustom = !props.size && (attrs.width || attrs.height)
return props.size === 'custom' || addCustom ? 'custom-size' : props.size
}
const classNames = (() => {
return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class]
})()
return () =>
props.use
? h(
'svg',
{
...attrs,
xmlns: 'http://www.w3.org/2000/svg',
class: classNames,
role: 'img',
},
h('use', { href: props.use }),
)
: h('svg', {
...attrs,
xmlns: 'http://www.w3.org/2000/svg',
class: classNames,
viewBox: viewBox,
innerHTML: `${titleCode}${iconCode.value}`,
role: 'img',
})
},
})
export { CIcon }
+71
View File
@@ -0,0 +1,71 @@
import { cloneVNode, defineComponent } from 'vue'
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: string) => {
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 { CIconSvg }
+35
View File
@@ -0,0 +1,35 @@
import { mount } from '@vue/test-utils'
import { CIcon } from './../'
describe('CIcon', () => {
it('renders svg with class="icon"', () => {
const container = mount(CIcon)
expect(container.find('svg').classes('icon')).toBe(true)
})
// it('renders svg with icon', () => {
// const { container } = mount(<CIcon icon={cifAu} />)
// expect(container.firstChild).toContain(cifAu[1])
// // expect(render()).toContain(cifAu)
// })
it('renders svg with size', () => {
const container = mount(CIcon, { props: { size: 'xl' } })
expect(container.find('svg').classes('icon-xl')).toBe(true)
})
it('renders svg with custom size', () => {
const container = mount(CIcon, { props: { height: 20 } })
expect(container.find('svg').classes('icon-custom-size')).toBe(true)
})
it('renders svg with className', () => {
const container = mount(CIcon, { props: { class: 'icon-test' } })
expect(container.find('svg').classes('icon-test')).toBe(true)
})
// it('renders <svg> with <use>', () => {
// const { container } = mount(<CIcon use="xxx" />)
// expect(container.firstChild?.firstChild).toContain('<use href="xxx" />')
// })
})
+4
View File
@@ -0,0 +1,4 @@
import { CIcon } from './CIcon'
import { CIconSvg } from './CIconSvg'
export { CIcon, CIconSvg }
export default CIcon