|
7 | 7 | <h1>Icon</h1> |
8 | 8 |
|
9 | 9 | <p> |
10 | | - The <a title="FluentUI System Icons repository" href="https://github.com/microsoft/fluentui-system-icons" target="_blank" rel="noopener">Fluent UI System Icons</a> |
11 | | - are a (still growing) collection of familiar, friendly and modern icons from Microsoft. At the moment there are more than 2200 distinct icons |
| 10 | + The <a title="FluentUI System Icons repository" href="https://github.com/microsoft/fluentui-system-icons" target="_blank" rel="noopener">Fluent UI System Icons</a> |
| 11 | + are a (still growing) collection of familiar, friendly and modern icons from Microsoft. At the moment there are more than 2200 distinct icons |
12 | 12 | available in both filled and outlined versions and in various sizes. In total the collections consists of well over 11k icons in SVG format. |
13 | 13 | </p> |
14 | 14 | <p> |
15 | 15 | This <a href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components.Icons" target="_blank">FluentUI Icons NuGet package</a> |
16 | | - contains all these icons, which you can access directly in your projects. |
17 | | - To use them, simply reference this package in your project. |
| 16 | + contains all these icons, which you can access directly in your projects. To use them, simply reference this package in your project. |
| 17 | +</p> |
| 18 | +<p> |
| 19 | + <div class="demopanel" style="margin: 1rem 0; padding: 1.5rem;"> |
| 20 | + <h3>Important</h3> |
| 21 | + As of version 4.11.0 of our Icons package, we are packaging each icon variant (filled, outlined, regular, etc.) in its own assembly. |
| 22 | + This became necessary due to the large number of icons and some compiler limitations. Nothing has changed on how the Icons package needs to be installed or added to your project. |
| 23 | + There is a just a small change needed to your imports file (or using statements). |
| 24 | + <br /> |
| 25 | + <br /> |
| 26 | + <blockquote> |
| 27 | + To use the new version in your (upgraded) projects, you need add the following <code>@using</code> statement to your _Imports.razor file: |
| 28 | + <CodeSnippet Language="csharp">@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons</CodeSnippet> |
| 29 | + </blockquote> |
| 30 | + <br /> |
| 31 | + Alternatively, you can use the full namespace in your code or define the alias for the namespace at the top of your file. |
| 32 | + <br /> |
| 33 | + <br /> |
| 34 | + When creating an application through one of the Fluent templates (v4.11.0 or higher), everything will already be correctly set up for you. |
| 35 | + |
| 36 | + |
| 37 | + </div> |
18 | 38 | </p> |
19 | 39 | <p> |
20 | 40 | During the DotNet Publication process, the unused icons are automatically removed from the final library. |
|
27 | 47 | </p> |
28 | 48 |
|
29 | 49 | <p> |
30 | | - You can use any of these icons by levaraging the <code><FluentIcon></code> component. See below for the parameters and examples. |
31 | | - There is also a search capability available on this page wich allows you to browse to all the different icons. At the moment the icons |
32 | | - displayed in this explorer below are always using the default blue accent color. When using the icons in your application, they will render |
| 50 | + You can use any of these icons by levaraging the <code><FluentIcon></code> component. See below for the parameters and examples. |
| 51 | + There is also a search capability available on this page wich allows you to browse to all the different icons. At the moment the icons |
| 52 | + displayed in this explorer below are always using the default blue accent color. When using the icons in your application, they will render |
33 | 53 | in the color set with the <code>Color</code> parameter. |
34 | 54 | </p> |
35 | 55 |
|
|
78 | 98 | <br /> |
79 | 99 | <ul> |
80 | 100 | <li> |
81 | | - <FluentIcon Value="@(new MyCircle())" Width="16px" /> |
| 101 | + <FluentIcon Value="@(new MyCircle())" Width="16px" /> |
82 | 102 | <code><FluentIcon Value="@@(new MyCircle())" Width="16px" /></code> |
83 | 103 | </li> |
84 | 104 | <li> |
85 | | - <FluentIcon Value="@(new MyCircle().WithColor("red"))" Width="16px" /> |
| 105 | + <FluentIcon Value="@(new MyCircle().WithColor("red"))" Width="16px" /> |
86 | 106 | <code><FluentIcon Value="@@(new MyCircle().WithColor("red"))" Width="16px" /></code> |
87 | 107 | </li> |
88 | 108 | <li> |
89 | | - @(new MyCircle().ToMarkup("16px", "blue")) |
| 109 | + @(new MyCircle().ToMarkup("16px", "blue")) |
90 | 110 | <code>@@new MyCircle().ToMarkup("16px", "blue")</code> |
91 | 111 | </li> |
92 | 112 | <li> |
|
108 | 128 | // Default Color (`fill` style) |
109 | 129 | WithColor("#F97316"); |
110 | 130 | } |
111 | | -}</CodeSnippet> |
| 131 | +}</CodeSnippet> |
112 | 132 | </p> |
113 | 133 | <p> |
114 | 134 | Using the <b>IconSize.Custom</b> size, certain restrictions will apply: <code>FluentButton.Loading</code> or <code>Icon.ToMarkup</code> could be affected. |
|
118 | 138 |
|
119 | 139 | <ApiDocumentation Component="typeof(FluentIcon<>)" InstanceTypes="@(new[] {typeof(Icon)})" GenericLabel="Icon"> |
120 | 140 | <Description> |
121 | | - You can use either the <code>Icon</code> or <code>Value</code> parameter to specify the icon to render. The <code>Icon</code> parameter takes a |
122 | | - <code>Icon</code> Type, while the <code>Value</code> parameter takes a icon object. |
| 141 | + You can use either the <code>Icon</code> or <code>Value</code> parameter to specify the icon to render. The <code>Icon</code> parameter takes a |
| 142 | + <code>Icon</code> Type, while the <code>Value</code> parameter takes a icon object. |
123 | 143 | </Description> |
124 | 144 | </ApiDocumentation> |
125 | 145 |
|
|
0 commit comments