You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/docs/components/icon.md
+138-19
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
---
2
2
title: Vue Icon Component
3
3
name: Icon
4
-
description: Official Vue.js component for CoreUI Icons and CoreUI Icons PRO.
4
+
description: Vue icons library is a great resource for Vue developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work.
5
5
---
6
6
7
7
## Installation
8
8
9
-
If you want to use our icon component and our icons library you have to install two additional packages.
9
+
To start using CoreUI Vue Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice:
10
10
11
11
### Npm
12
12
@@ -27,7 +27,11 @@ yarn add @coreui/icons-vue
27
27
28
28
## Usage
29
29
30
-
### Single icon
30
+
Import vue.js icons using one of these two options:
31
+
32
+
### Single Vue.js icon
33
+
34
+
To use a single Vue.js icon, import the `<CIcon>` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `<CIcon>` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop.
31
35
32
36
::: demo
33
37
<CIcon:icon="icon.cilList"size="xl"/>
@@ -57,6 +61,8 @@ export default {
57
61
58
62
### All icons
59
63
64
+
To use all icons available in the CoreUI Vue.js Icons package, import the CIcon component and the entire `@coreui/icons` library using the `* as` syntax. Then, reference the desired icon within the `icon` prop.
65
+
60
66
```vue
61
67
<template>
62
68
<CIcon :icon="icon.cilList" size="xxl"/>
@@ -76,10 +82,9 @@ export default {
76
82
}
77
83
</script>
78
84
```
79
-
80
85
### Icons object
81
86
82
-
This way you import your needed icons once and pass them to $root object on 'icons' key
87
+
This way you import your needed Vue.js icons once and pass them to $root object on 'icons' key
You can pass the name of the icon both in camelCase and kebab-case
123
131
132
+
### Color
133
+
134
+
The CoreUI Vue Icon component offers versatile color customization options, empowering you to personalize the icons in multiple ways. You can effortlessly modify the colors by utilizing either class names or CSS variables, providing flexibility and ease in creating visually stunning and cohesive icon designs.
135
+
136
+
#### Utility classes
137
+
138
+
With some [color utility classes](https://coreui.io/docs/utilities/colors/), you may use color to convey message.
CoreUI Vue Icons leverage local CSS variables, such as `--ci-primary-color` and `--ci-secondary-color` (for Duotone icons), to facilitate real-time customization. This allows developers to easily customize the icons by providing their own custom CSS variables.
Set heights of vue icons using size property like `size="lg"` and `size="sm"`.
177
+
178
+
::: demo
179
+
<CIcon:icon="icon.cilList"size="sm" />
180
+
<CIcon:icon="icon.cilList" />
181
+
<CIcon:icon="icon.cilList"size="lg" />
182
+
<CIcon:icon="icon.cilList"size="xl" />
183
+
<CIcon:icon="icon.cilList"size="xxl" />
184
+
<CIcon:icon="icon.cilList"size="3xl" />
185
+
:::
186
+
```vue
187
+
<CIcon :icon="cilList" size="sm" />
188
+
<CIcon :icon="cilList" />
189
+
<CIcon :icon="cilList" size="lg" />
190
+
<CIcon :icon="cilList" size="xl" />
191
+
<CIcon :icon="cilList" size="xxl" />
192
+
<CIcon :icon="cilList" size="3xl" />
193
+
```
194
+
195
+
### Custom SVG Icons
196
+
197
+
The `<CIconSvg`> component allows you to add custom SVG icons to your application. In case you want to use custom SVG icons, this component provides the flexibility to include bespoke SVG graphics that align with your design requirements.
0 commit comments