From 07d9aeee9cf6b8b54644469b118fb0a3cfa60e63 Mon Sep 17 00:00:00 2001
From: Barsukov Nikita <nikita.s.barsukov@gmail.com>
Date: Tue, 20 Sep 2022 17:35:35 +0300
Subject: [PATCH] chore(demo): `Svg` improve documentation (#2737)

---
 .../src/modules/components/svg/svg.module.ts  |  3 +-
 .../modules/components/svg/svg.template.html  | 34 +++++++++++++------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/projects/demo/src/modules/components/svg/svg.module.ts b/projects/demo/src/modules/components/svg/svg.module.ts
index 73fcc087927c..399c32595c82 100644
--- a/projects/demo/src/modules/components/svg/svg.module.ts
+++ b/projects/demo/src/modules/components/svg/svg.module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiSvgModule} from '@taiga-ui/core';
+import {TuiLinkModule, TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
 import {TuiPresentModule} from '@taiga-ui/kit';
 
 import {TuiSvgExample1} from './examples/1';
@@ -17,6 +17,7 @@ import {ExampleTuiSvgComponent} from './svg.component';
         TuiPresentModule,
         TuiLinkModule,
         TuiAddonDocModule,
+        TuiNotificationModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSvgComponent)),
     ],
     declarations: [ExampleTuiSvgComponent, TuiSvgExample1, TuiSvgExample2],
diff --git a/projects/demo/src/modules/components/svg/svg.template.html b/projects/demo/src/modules/components/svg/svg.template.html
index 03464b33e094..a8e0d46dcfb3 100644
--- a/projects/demo/src/modules/components/svg/svg.template.html
+++ b/projects/demo/src/modules/components/svg/svg.template.html
@@ -6,18 +6,32 @@
     <ng-template pageTab>
         <p i18n>
             <code>Svg</code>
-            is a component for working with SVG-image and its colors. If you want to use custom icons that you don't
-            trust, you need to provide a
-            <a
-                tuiLink
-                routerLink="/icon-set"
-                fragment="sanitizer"
-            >
-                sanitizer
-            </a>
-            .
+            is a component for working with SVG-image and its colors.
         </p>
 
+        <tui-notification
+            status="warning"
+            class="tui-space_top-6"
+        >
+            <h4 class="tui-space_top-0">
+                You need to
+                <a
+                    tuiLink
+                    routerLink="/icon-set"
+                    fragment="sanitizer"
+                >
+                    provide TUI_SANITIZER
+                </a>
+                if you want to use
+                <code>Svg</code>
+                -component with:
+            </h4>
+            <ul class="tui-list tui-list_small">
+                <li class="tui-list__item">icon which was imported from source code</li>
+                <li class="tui-list__item">custom icons that you don't trust</li>
+            </ul>
+        </tui-notification>
+
         <tui-doc-example
             id="all"
             i18n-heading