diff --git a/docs/getting-started/build-tools/index.html b/docs/getting-started/build-tools/index.html index 604b74caf..a1b3b6da1 100644 --- a/docs/getting-started/build-tools/index.html +++ b/docs/getting-started/build-tools/index.html @@ -20,30 +20,16 @@ - + - - diff --git a/docs/getting-started/introduction/index.html b/docs/getting-started/introduction/index.html index 6f6e4ba8c..2617d1f12 100644 --- a/docs/getting-started/introduction/index.html +++ b/docs/getting-started/introduction/index.html @@ -20,30 +20,16 @@ - + - - diff --git a/docs/index.xml b/docs/index.xml index 8df0bf3e6..109a79d84 100644 --- a/docs/index.xml +++ b/docs/index.xml @@ -38,7 +38,7 @@ Please use cil- prefix for linear icons, cib- prefix for brand icons, and cif- p Mon, 01 Jan 0001 00:00:00 +0000 https://icons.coreui.io/docs/using-coreui-icons-with/angular/ - Cooming Soon + Features Loads icons in three ways: stored globally in Angular service, directly passed SVG tag content, source link to SVG file Reduces icons bundle size when imported as single icons, Full functionality of <svg> html tag, Clean API Installation npm install @coreui/icons npm install @coreui/icons-angular Usage // app NgModule import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular'; @NgModule({ imports: [ IconModule, IconSetModule.forRoot(), ... providers: [IconSetService], . diff --git a/docs/using-coreui-icons-with/angular/index.html b/docs/using-coreui-icons-with/angular/index.html index c229bbcf8..7c46cf612 100644 --- a/docs/using-coreui-icons-with/angular/index.html +++ b/docs/using-coreui-icons-with/angular/index.html @@ -20,30 +20,16 @@ - + - - @@ -182,16 +168,178 @@ Using CoreUI Icons With On this page:



-

Cooming Soon

+ + +

Features

+ + + +

Installation

+
npm install @coreui/icons
+npm install @coreui/icons-angular
+

Usage

+
// app NgModule
+
+import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular';
+
+@NgModule({
+  imports: [
+    IconModule,
+    IconSetModule.forRoot(),
+...
+  providers: [IconSetService],
+...
// app component
+
+import { cilEnvelopeOpen, flagSet } from '@coreui/icons';
+import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular';
+
+@Component({
+  ...
+  providers: [IconSetService],
+  ...
+})
+export class AppComponent implements OnInit {
+  constructor(public iconSet: IconSetService) {
+    // iconSet singleton
+    iconSet.icons = { cilEnvelopeOpen, ...flagSet };
+  }
+...
<c-icon name="cil-envelope-open" size="lg"></c-icon>
+<c-icon name="cifAu"></c-icon>
+

API

+ +
+

Use one of name, src or content prop as it defines the way of icon import

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
proprertytypedefaultdescription
namestringundefinedname of SVG icon stored in IconSetService
contentstring, string[]undefinedSVG content
srcstringundefinedLink to the icon. If defined, component will be rendered as <img> tag
sizecustom, custom-size, sm, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl“Size of icon
titlestringundefined
usestringundefinedSVG <use>
customClassesstringundefinedReplaces default c-icon component classes
viewBoxstringundefinedSVG viewbox
attributesany{ role: 'img' }Object with additional html attributes
widthundefinedSVG width
heightundefinedSVG height
diff --git a/docs/using-coreui-icons-with/react/index.html b/docs/using-coreui-icons-with/react/index.html index e7dcb0976..62fbdcfaa 100644 --- a/docs/using-coreui-icons-with/react/index.html +++ b/docs/using-coreui-icons-with/react/index.html @@ -20,30 +20,16 @@ - + - - diff --git a/docs/using-coreui-icons-with/vue/index.html b/docs/using-coreui-icons-with/vue/index.html index 88ab88433..cee892cf0 100644 --- a/docs/using-coreui-icons-with/vue/index.html +++ b/docs/using-coreui-icons-with/vue/index.html @@ -20,30 +20,16 @@ - + - -