docs:(search input):v6 design guidelines image updates

packages/documentation-site/patternfly-docs/content/design-guidelines/components/search-input/search-input.md

@@ -3,14 +3,16 @@ id: Search input
 section: components
 ---
 
+import '../components.css';
+
 ## Usage
 Use a search input when you want to either filter down or locate values from a dataset that match an inputted value.
 
 ### Search input as a type-ahead filter
 
 A search input can act as a basic filter for narrowing a list of values as the user types. If you want a search field with an explicit submit button (not type-ahead), we recommend that you use an [input group](/components/input-group) with a search button to act as a basic text filter.
 
-<img src="./img/search-input-active-table.png" alt="Search input active in a basic table" width="1500"/>
+<div class="ws-docs-content-img">![Search input active in a basic table](./img/active-table.svg)</div>
 
 1. **Input field:** The user’s input immediately starts filtering down the list as the user types. There is no need for them to press enter.
 
@@ -23,7 +25,7 @@ A search input can act as a basic filter for narrowing a list of values as the u
 ### Search input as a find function
 Another way to use search input is as a find function. This would mean that the value entered within the field would then be compared to each result, and only matches would be highlighted.
 
-<img src="./img/search-input-navigation-2-table.png" alt="Search input with active navigation in a basic table" width="1500"/>
+<div class="ws-docs-content-img">![Search input with active navigation in a basic table](./img/search-find.svg)</div>
 
 1. **Input field:** The user’s input immediately starts matching to values as they begin typing.
 
@@ -38,7 +40,7 @@ Another way to use search input is as a find function. This would mean that the
 ### Advanced search
 The [advanced search variant](/components/search-input#advanced) is intended for more advanced search use cases across multiple attribute-value pairs. It allows users to enter complex search queries from the keyboard or to fill out a search form. Use this component for search or filter queries that involve many attributes and when you want to give the user the option to use a form to complete the search criteria.
 
-<img src="./img/search-input-advanced-open.png" alt="Search input with active navigation in a basic table" width="1500"/>
+<div class="ws-docs-content-img">![Search input with advanced navigation in a basic table](./img/search-advanced.svg)</div>
 
 1. **Input field:** Accepts one or more search queries in the form of an attribute-value pair. The delimiter character used to separate attribute and value strings can be passed to the component. Typical delimiter characters are “:” or “=”. If the user enters a string that is not in the form of an attribute-value pair, it will be treated as a standard text search where the software will search for the occurrence of that string anywhere in the data set.