SampleIconPage.cs
1 ο»Ώ// Copyright (c) Microsoft Corporation 2 // The Microsoft Corporation licenses this file to you under the MIT license. 3 // See the LICENSE file in the project root for more information. 4 5 using System.Linq; 6 using Microsoft.CommandPalette.Extensions; 7 using Microsoft.CommandPalette.Extensions.Toolkit; 8 9 namespace SamplePagesExtension.Pages; 10 11 internal sealed partial class SampleIconPage : ListPage 12 { 13 private readonly IListItem[] _items = 14 [ 15 /* 16 * Quick intro to Unicode in source code: 17 * - Every character has a code point (e.g., U+0041 = 'A'). 18 * - Code points up to U+FFFF use \u1234 (4 hex digits and lowercase u). 19 * - Code points above that (up to U+10FFFF) use \U12345678 (8 hex digits and capital letter U). 20 * - If your source file is UTF-8, you can type the character directly, but it may not display properly in editors, 21 * and it's harder to see the actual code point. 22 * - Some symbols (like many emojis) are built from multiple code points 23 * joined together (e.g., ππ» = U+1F44B + U+1F3FB). 24 * 25 * Examples: 26 * π = "π" or "\U0001F60D" 27 * ππ» = "ππ»" or "\U0001F44B\U0001F3FB" 28 * π§ββοΈ = "π§ββοΈ" or "\U0001F9D9\u200D\u2642\U0000FE0F" (male mage) 29 * π§πΏββοΈ = "π§πΏββοΈ" or "\U0001F9D9\U0001F3FF\u200D\u2640\U0000FE0F" (dark-skinned woman mage) 30 * 31 */ 32 33 // Emoji Smiling Face with Heart-Eyes 34 // Unicode: \U0001F60D 35 BuildIconItem("π", "Standard emoji icon", "Basic emoji character rendered as an icon"), 36 37 // Emoji Smiling Face with Heart-Eyes 38 // Unicode: \U0001F60D\U0001F643\U0001F622 39 BuildIconItem("πππ’", "Multiple emojis", "Use of multiple emojis for icon is not allowed"), 40 41 // Emoji Smiling Face with Sunglasses 42 // Unicode: \U0001F60E 43 BuildIconItem("\U0001F60E", "Unicode escape sequence emoji", "Emoji defined using Unicode escape sequence notation"), 44 45 // Segoe Fluent Icons font icon 46 // Unicode: \uE8D4 47 BuildIconItem("\uE8D4", "Segoe Fluent icon demonstration", "Segoe Fluent/MDL2 icon from system font\nWorks as an icon but won't display properly in button text"), 48 49 // Extended pictographic symbol for keyboard 50 BuildIconItem("\u2328", "Extended pictographic symbol", "Pictographic symbol representing a keyboard"), 51 52 // Capital letter A 53 BuildIconItem("A", "Simple text character as icon", "Basic letter character used as an icon demonstration"), 54 55 // Letter 1 56 // Unicode: \U00000031 57 BuildIconItem("1", "Simple text character as icon", "Basic letter character used as an icon demonstration"), 58 59 // Emoji Keycap Digit Two ... 2οΈβ£ 60 // Unicode: \U00000032\U000020E3 61 // This is a sequence of three code points: the digit '2' (U+0032), and a combining enclosing keycap (U+20E3). No variation selector is used here. 62 BuildIconItem("\U00000032\U000020E3", "Emoji without variation selector", "Emoji character doesn't have VS16 variation selector to render as text"), 63 64 // Emoji Keycap Digit Three ... 3οΈβ£ 65 // Unicode: \U00000033\U0000FE0F\U000020E3 66 // This is a sequence of three code points: the digit '3' (U+0033), a variation selector (U+FE0F) to specify emoji presentation, and a combining enclosing keycap (U+20E3). 67 BuildIconItem("3οΈβ£", "Emoji with variation selector", "Emoji character using a variation selector to specify emoji presentation"), 68 69 // Symbol # 70 // Unicode: \u0023 71 BuildIconItem("#", "Simple text character as icon", "Basic letter character used as an icon demonstration"), 72 73 // Symbol # keycap 74 // Unicode: \u0023\ufe0f\u20e3 75 // Sequence of 3 code points: symbol #, a variation selector (U+FE0F) to specify emoji presentation, and a combining enclosing keycap (U+20E3). 76 BuildIconItem("\u0023\ufe0f\u20e3", "Simple text character as icon", "Basic letter character used as an icon demonstration"), 77 78 // Capital letter WM 79 // This is two characters, which is not a valid icon representation. It will be replaced by a placeholder signalizing an invalid icon. 80 BuildIconItem("WM", "Invalid icon representation", "String with multiple characters that does not correspond to a valid single icon"), 81 82 // Emoji Mage 83 // Unicode: \U0001F9D9 84 BuildIconItem("π§", "Single code-point emoji example", "Simple emoji character using a single Unicode code point"), 85 86 // Emoji Male Mage (Mage with gender modifier) 87 // Unicode: \U0001F9D9\u200D\u2642\uFE0F 88 BuildIconItem("π§ββοΈ", "Complex emoji with gender modifier", "Composite emoji using Zero-Width Joiner (ZWJ) sequence for male variant"), 89 90 // Emoji Woman Mage (Mage with gender modifier) 91 // Unicode: \U0001F9D9\u200D\u2640\uFE0F 92 BuildIconItem("\U0001F9D9\u200D\u2640\uFE0F", "Complex emoji with gender modifier", "Composite emoji using Zero-Width Joiner (ZWJ) sequence for female variant"), 93 94 // Emoji Waving Hand 95 // Unicode: \U0001F44B 96 BuildIconItem("π", "Basic hand gesture emoji", "Standard emoji character representing a waving hand"), 97 98 // Emoji Waving Hand + Light Skin Tone 99 // Unicode: \U0001F44B\U0001F3FB 100 BuildIconItem("ππ»", "Emoji with light skin tone modifier", "Emoji enhanced with Unicode skin tone modifier (light)"), 101 102 // Emoji Waving Hand + Dark Skin Tone 103 // Unicode: \U0001F44B\U0001F3FF 104 BuildIconItem("\U0001F44B\U0001F3FF", "Emoji with dark skin tone modifier", "Emoji enhanced with Unicode skin tone modifier (dark)"), 105 106 // Flag of Czechia (Czech Republic) 107 // Unicode: \U0001F1E8\U0001F1FF 108 BuildIconItem("\U0001F1E8\U0001F1FF", "Flag emoji using regional indicators", "Emoji flag constructed from regional indicator symbols for Czechia"), 109 110 // Use of ZWJ without emojis 111 // KA (\u0995) + VIRAMA (\u09CD) + ZWJ (\u200D) - shows the half-form KA 112 // Unicode: \u0995\u09CD\u200D 113 BuildIconItem("\u0995\u09CD\u200D", "Use of ZWJ in non-emoji context", "Shows the half-form KA"), 114 115 // Use of ZWJ without emojis 116 // KA (\u0995) + VIRAMA (\u09CD) + Shows full KA with an explicit virama mark (not half-form). 117 // Unicode: \u0995\u09CD 118 BuildIconItem("\u0995\u09CD", "Use of ZWJ in non-emoji context", "Shows full KA with an explicit virama mark"), 119 120 // mahjong tile red dragon (using Unicode escape sequence) 121 // https://en.wikipedia.org/wiki/Mahjong_Tiles_(Unicode_block) 122 // Unicode: \U0001F004 123 BuildIconItem("\U0001F004", "Mahjong tile emoji (red dragon)", "Mahjong tile red dragon emoji character using Unicode escape sequence"), 124 125 // mahjong tile green dragon (non-emoji) 126 // https://en.wikipedia.org/wiki/Mahjong_Tiles_(Unicode_block) 127 // Unicode: \U0001F005 128 BuildIconItem("\U0001F005", "Mahjong tile non-emoji (green dragon)", "Mahjong tile character that is not classified as an emoji"), 129 130 // Play, PlayPause, Stop 131 BuildIconItem("\u25B6", "Play symbol (standalone)", "Play symbol"), 132 BuildIconItem("\u25B6\uFE0E", "Play symbol + VS15 (request text)", "Play symbol with variation specifier requesting rendering as text"), 133 BuildIconItem("\u25B6\uFE0F", "Play symbol + VS16 (request emoji)", "Play symbol with variation specifier requesting rendering as emoji "), 134 BuildIconItem("β―οΈ", "Play/Pause keycap emoji", "Play/Pause keycap emoji doesn't have plain text variant"), 135 BuildIconItem("βΈοΈ", "Pause keycap emoji", "Pause keycap emoji doesn't have plain text variant"), 136 137 // Copyright and emoji copyright: 138 BuildIconItem("\u00a9", "Copyright symbol (standalone)", "Copyright symbol that is not classified as an emoji"), 139 BuildIconItem("\u00a9\uFE0E", "Copyright symbol + VS15 (request text)", "Copyright symbol that is not classified as an emoji"), 140 BuildIconItem("\u00a9\uFE0F", "Copyright symbol + VS16 (request emoji)", "Copyright symbol that is not classified as an emoji"), 141 142 // Tag flags 143 BuildIconItem("π³οΈ", "White Flag", "White Flag"), 144 BuildIconItem("\U0001F3F4\u200D\u2620\uFE0F", "Pirate Flag", "Pirate Flag"), 145 ]; 146 147 public SampleIconPage() 148 { 149 Icon = new IconInfo("\uE8BA"); 150 Name = "Sample Icon Page"; 151 ShowDetails = true; 152 } 153 154 public override IListItem[] GetItems() => _items; 155 156 private static ListItem BuildIconItem(string icon, string title, string description) 157 { 158 var iconInfo = new IconInfo(icon); 159 160 return new ListItem(new CopyTextCommand(icon) { Name = "Action with " + icon }) 161 { 162 Title = title, 163 Subtitle = description, 164 Icon = iconInfo, 165 Tags = [ 166 new Tag("Tag") { Icon = iconInfo }, 167 ], 168 Details = new Details 169 { 170 HeroImage = iconInfo, 171 Title = title, 172 Body = description, 173 Metadata = [ 174 new DetailsElement 175 { 176 Key = "Unicode Code Points", 177 Data = new DetailsTags 178 { 179 Tags = icon.EnumerateRunes() 180 .Select(rune => rune.Value <= 0xFFFF ? $"\\u{rune.Value:X4}" : $"\\U{rune.Value:X8}") 181 .Select(t => new Tag(t)) 182 .ToArray<ITag>(), 183 }, 184 } 185 ], 186 }, 187 }; 188 } 189 }