Fix SearchAutocomplete anatomy diagram (#3558)

* fix SearchAutocomplete anatomy diagram

* update fonts

* fix line colors

Author: reidbarber

packages/@react-aria/autocomplete/docs/anatomy.svg

@@ -18,7 +18,7 @@ import overlaysDocs from 'docs:@react-aria/overlays';
 import packageData from '@react-aria/autocomplete/package.json';
 import selectionDocs from 'docs:@react-stately/selection';
 import statelyDocs from 'docs:@react-stately/combobox';
-import anatomy from 'url:./searchautocomplete-anatomy.png';
+import Anatomy from './anatomy.svg';
 import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
 
@@ -69,7 +69,7 @@ Autocomplete for search fields can be implemented using the [<datalist>](h
 
 ## Anatomy
 
-<img src={anatomy} alt="Anatomy of useSearchAutocomplete" height={400} style={{display: 'block', margin: '20px auto'}} />
+<Anatomy />
 
 A search autocomplete consists of a label, an input which displays the current value, and a list box popup. Users can type within the input
 to see search suggestions within the list box. The list box popup may be opened by a variety of input field interactions specified