fix: Updated readme (#6)

- Added Setup Guide to Readme
- Added Screenshots to Readme

README.md

@@ -11,8 +11,7 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/strapi-bootstrap-icons">
     <img src="https://img.shields.io/npm/v/strapi-bootstrap-icons" alt="Version">
-    <img src="https://img.shields.io/npm/l/strapi-bootstrap-icons
-" alt="License">
+    <img src="https://img.shields.io/npm/l/strapi-bootstrap-icons" alt="License">
   </a>
 </p>
 
@@ -29,5 +28,30 @@ npm install strapi-bootstrap-icons
 yarn add strapi-bootstrap-icons
 ```
 
+## Setup
+
+After installation you will find the `Bootstrap Icon` at the custom fields section of the content-type builder.
+
+![strapi bootstrap icons](./screenshot/screenshot-1.png)
+
+Now you can define the field attributes. `Bootstrap Icon` field allows you to select a response type for the field value in 3 formats.
+
+- Base64
+- SVG
+- CSS Class
+
+![strapi bootstrap icons](./screenshot/screenshot-2.png)
+
+Now You can create new records via the Admin panel with selecting your preferred bootstrap icons.
+
+![strapi bootstrap icons](./screenshot/screenshot-3.png)
+
+
+![strapi bootstrap icons](./screenshot/screenshot-4.png)
+
+## Demo
+
+![strapi bootstrap icons demo](./screenshot/demo.gif)
+
 ## License
 This plugin is licensed under the MIT License. See the LICENSE file for more information.

admin/src/components/Input/index.tsx

@@ -125,7 +125,7 @@ const Input = ({
             disabled={disabled}
             startAction={
               <FieldActionWrapper onClick={toggleModal}>
-                <i className={`bi bi-${value}`}></i>
+                <Typography className={`bi bi-${value}`}></Typography>
               </FieldActionWrapper>
             }
             endAction={
@@ -176,10 +176,10 @@ const Input = ({
                     style={{ width: "inherit", height: "inherit" }}
                     onClick={() => handleClickIcon(item)}
                   >
-                    <i
+                    <Typography
                       className={`icon bi-${item}`}
                       style={{ fontSize: 24 }}
-                    ></i>
+                    ></Typography>
                   </IconButton>
                 </Tooltip>
               ))}

admin/src/components/ThumbIcon/index.js

@@ -5,8 +5,9 @@
  */
 
 import React from "react";
-import icon from "./icon.svg";
+import { Typography } from '@strapi/design-system';
+import 'bootstrap-icons/font/bootstrap-icons.css'
 
-const ThumbIcon = () => <img alt={"bootstrap icons"} src={icon} />;
+const ThumbIcon = () => <Typography className="bi bi-bootstrap"></Typography>
 
 export default ThumbIcon;

admin/src/pages/HomePage/index.tsx

@@ -14,6 +14,7 @@ import {
   Tooltip,
   SearchForm,
   Searchbar,
+  Typography
 } from "@strapi/design-system";
 import { useIntl } from "react-intl";
 import pluginId from "../../pluginId";
@@ -85,7 +86,7 @@ const HomePage = () => {
                 aria-label="Edit"
                 style={{ width: "inherit", height: "inherit" }}
               >
-                <i className={`icon bi-${item}`} style={{ fontSize: 24 }}></i>
+                <Typography className={`icon bi-${item}`} style={{ fontSize: 24 }}></Typography>
               </IconButton>
             </Tooltip>
           ))}