Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(icons): add all svg icons in the @fluentui/react-icons package #12641

Merged
merged 36 commits into from
Apr 17, 2020

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented Apr 10, 2020

This PR is continuing the work from #12608

Things done in this PR:

  • added 1979 svgs icons inside the @fluentui/react-icons package
  • updated react-icons/index.tsx to export all icons
  • remove old example icons: OneDriveIcon, YammerIcon and BorderBlindsIcon
  • updated components.test.tsx's paths

image

@mnajdova mnajdova changed the title feat(icons): add all svg icons in the @fluentui/react-icons package and storybook example showing all of them feat(icons): add all svg icons in the @fluentui/react-icons package Apr 10, 2020
@size-auditor
Copy link

size-auditor bot commented Apr 13, 2020

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 66e61600f1af22b6d49ca87f3bb80b43158a2174 (build)

# Conflicts:
#	packages/office-ui-fabric-react/src/components/Icon/examples/Icon.SvgFactory.Example.tsx
#	packages/react-icons/src/index.ts
-reverted removed icons
@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 14, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 871 826 5000
Checkbox 1867 1831 5000
CheckboxBase 1542 1539 5000
ChoiceGroup 5511 5428 5000
ComboBox 971 1000 1000
CommandBar 7420 7495 1000
DefaultButton 1123 1131 5000
DetailsRow 3503 3473 5000
DetailsRow (fast icons) 3575 3506 5000
DetailsRow without styles 3313 3264 5000
Dialog 1445 1476 1000
DocumentCardTitle with truncation 1579 1564 1000
Dropdown 3384 3258 5000
FocusZone 1652 1642 5000
IconButton 1754 1795 5000
Label 499 511 5000
Link 461 453 5000
MenuButton 1477 1448 5000
Nav 3202 3188 1000
Panel 1447 1435 1000
Persona 847 821 1000
Pivot 1353 1270 1000
PrimaryButton 1211 1277 5000
SearchBox 1576 1538 5000
Slider 1944 1948 5000
Spinner 421 377 5000
SplitButton 3117 3183 5000
Stack 493 468 5000
Stack with Intrinsic children 1127 1121 5000
Stack with Text children 4297 4332 5000
TagPicker 2765 2738 5000
Text 375 393 5000
TextField 1736 1808 5000
Toggle 921 900 5000
button 60 65 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.51 0.98:1 2000 1007
🦄 Button.Fluent 0.11 0.21 0.52:1 5000 571
🔧 Checkbox.Fluent 0.67 0.41 1.63:1 1000 673
🔧 Dialog.Fluent 0.36 0.22 1.64:1 5000 1813
🔧 Dropdown.Fluent 3.21 0.52 6.17:1 1000 3211
🔧 Icon.Fluent 0.15 0.05 3:1 5000 762
🎯 Image.Fluent 0.09 0.11 0.82:1 5000 447
🔧 Slider.Fluent 1.36 0.42 3.24:1 1000 1358
🔧 Text.Fluent 0.08 0.02 4:1 5000 405
🦄 Tooltip.Fluent 0.09 15.75 0.01:1 5000 457

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 563 517 1.09:1
AttachmentMinimalPerf.default 169 157 1.08:1
IconMinimalPerf.default 796 745 1.07:1
FlexMinimalPerf.default 348 329 1.06:1
ListCommonPerf.default 1104 1041 1.06:1
TooltipMinimalPerf.default 767 727 1.06:1
Image.Fluent 447 423 1.06:1
LabelMinimalPerf.default 474 454 1.04:1
TextMinimalPerf.default 401 387 1.04:1
TreeWith60ListItems.default 232 224 1.04:1
Avatar.Fluent 1007 969 1.04:1
Text.Fluent 405 388 1.04:1
ButtonMinimalPerf.default 164 159 1.03:1
ChatMinimalPerf.default 703 683 1.03:1
RadioGroupMinimalPerf.default 672 651 1.03:1
AccordionMinimalPerf.default 212 208 1.02:1
DividerMinimalPerf.default 795 782 1.02:1
ItemLayoutMinimalPerf.default 1793 1758 1.02:1
LayoutMinimalPerf.default 634 619 1.02:1
ListMinimalPerf.default 542 529 1.02:1
ProviderMinimalPerf.default 647 636 1.02:1
ReactionMinimalPerf.default 1993 1953 1.02:1
TableMinimalPerf.default 619 607 1.02:1
Dialog.Fluent 1813 1777 1.02:1
AttachmentSlotsPerf.default 1198 1187 1.01:1
CarouselMinimalPerf.default 630 626 1.01:1
CheckboxMinimalPerf.default 3028 3002 1.01:1
DropdownMinimalPerf.default 3265 3245 1.01:1
GridMinimalPerf.default 736 726 1.01:1
ListNestedPerf.default 983 972 1.01:1
LoaderMinimalPerf.default 795 785 1.01:1
ProviderMergeThemesPerf.default 1586 1565 1.01:1
CustomToolbarPrototype.default 3603 3556 1.01:1
TreeMinimalPerf.default 1280 1267 1.01:1
Button.Fluent 571 568 1.01:1
Icon.Fluent 762 753 1.01:1
AnimationMinimalPerf.default 729 728 1:1
BoxMinimalPerf.default 369 370 1:1
CardMinimalPerf.default 628 625 1:1
ChatWithPopoverPerf.default 598 597 1:1
InputMinimalPerf.default 1025 1026 1:1
MenuMinimalPerf.default 1929 1930 1:1
RefMinimalPerf.default 209 209 1:1
SliderMinimalPerf.default 1373 1375 1:1
SplitButtonMinimalPerf.default 3891 3873 1:1
Checkbox.Fluent 673 670 1:1
Slider.Fluent 1358 1353 1:1
Tooltip.Fluent 457 456 1:1
ChatDuplicateMessagesPerf.default 420 424 0.99:1
DialogMinimalPerf.default 1780 1799 0.99:1
HeaderMinimalPerf.default 551 558 0.99:1
HierarchicalTreeMinimalPerf.default 1065 1079 0.99:1
ImageMinimalPerf.default 435 440 0.99:1
ListWith60ListItems.default 1197 1207 0.99:1
MenuButtonMinimalPerf.default 1631 1642 0.99:1
SegmentMinimalPerf.default 981 992 0.99:1
TextAreaMinimalPerf.default 2882 2924 0.99:1
Dropdown.Fluent 3211 3253 0.99:1
HeaderSlotsPerf.default 1606 1640 0.98:1
PortalMinimalPerf.default 324 331 0.98:1
StatusMinimalPerf.default 764 778 0.98:1
ButtonSlotsPerf.default 582 597 0.97:1
EmbedMinimalPerf.default 4314 4477 0.96:1
ToolbarMinimalPerf.default 1090 1134 0.96:1
VideoMinimalPerf.default 839 877 0.96:1
AlertMinimalPerf.default 530 567 0.93:1
DropdownManyItemsPerf.default 1394 1535 0.91:1
PopupMinimalPerf.default 234 260 0.9:1
FormMinimalPerf.default 828 955 0.87:1

@mnajdova mnajdova merged commit d8a2780 into microsoft:master Apr 17, 2020
@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.107.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-icons@v0.1.3 has been released which incorporates this pull request.:tada:

Handy links:

DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
…icrosoft#12641)

* wip

* -added example svg icons

* -added props support by diff factory

* Update packages/react-icons/src/components/BorderBlindsIcon.tsx

Co-Authored-By: David Zearing <dzearing@microsoft.com>

* Update packages/react-icons/src/components/BorderBlindsIcon.tsx

Co-Authored-By: David Zearing <dzearing@microsoft.com>

* Update packages/react-icons/src/utils/createSvgIcon.ts

Co-Authored-By: Elizabeth Craig <ecraig12345@gmail.com>

* Update packages/react-icons/README.md

Co-Authored-By: Elizabeth Craig <ecraig12345@gmail.com>

* -cleanups
-removed circular dependencies

* -removed comments

* -improvements

* -exported utilities

* -added icons as react components

* -added storybook example with all svg icons

* -updated readme

* -addressed comments

* -added tests

* -added dependencies

* -removed merge conflicts changes

* -picked changes from master

* -reverted changes

* -updated package json

* -removed example icons

* -reverted changes in svg factory
-reverted removed icons

* -reverted some changes

* -removed example icons

* -reverted unintended changes

* Change files

* -updated test

* -updated snapshots

* Change files

Co-authored-by: David Zearing <dzearing@microsoft.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants