Improve documentation

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/app/(docs)/page.mdx

@@ -17,7 +17,7 @@ building it incrementally with not conflict with the existing theming system.
 
 Install Canon using a package manager.
 
-<CodeBlock lang="shell" code={`npm install @backstage/canon`} />
+<CodeBlock lang="shell" code={`yarn add @backstage/canon`} />
 
 ### 2. Import the css files
 
@@ -28,19 +28,7 @@ import '@backstage/canon/css/core.css';
 import '@backstage/canon/css/components.css';
 ```
 
-### 3. Add the theme provider
-
-Add the theme provider to your application.
-
-```tsx
-import { ThemeProvider } from '@backstage/canon';
-
-<ThemeProvider>
-  <App />
-</ThemeProvider>;
-```
-
-### 4. Start building ✨
+### 3. Start building ✨
 
 Now you can start building your plugin using the new design system.
 

canon-docs/src/app/(docs)/theme/iconography/page.mdx

@@ -9,7 +9,15 @@ selection for you to use in your application. The list of names is set down
 below. To use an icon, you can use the `Icon` component and pass the name of
 the icon you want to use.
 
-<CodeBlock title="Icon component" code={`<Icon name="heart" />`} />
+<CodeBlock code={`<Icon name="heart" />`} />
+
+## Icon overrides
+
+You can override any icons in our library by using the `IconProvider` at the root of your application.
+
+<CodeBlock
+  code={`<IconProvider overrides={{ heart: () => <div>Custom Icon</div> }} />`}
+/>
 
 ## Icon library
 

canon-docs/src/app/(docs)/theme/responsive/page.mdx

@@ -105,19 +105,3 @@ the value, you add an object with the value and the breakpoint prefix.
 // Responsive value
 
 <Button size={{ xs: 'small', md: 'medium' }}>Button</Button>`} />
-
-## How to update breakpoints
-
-The set of keys are not to be changed, but you can update the minimum width of
-each breakpoint in the theme provider.
-
-<CodeBlock
-  code={`<CanonProvider breakpoints={{
-    xs: 0,
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    '2xl': 1536,
-}} />`}
-/>

canon-docs/src/app/providers.tsx

@@ -1,13 +1,8 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { CanonProvider } from '../../../packages/canon/src/contexts/canon';
 import { PlaygroundProvider } from '@/utils/playground-context';
 
 export const Providers = ({ children }: { children: ReactNode }) => {
-  return (
-    <CanonProvider>
-      <PlaygroundProvider>{children}</PlaygroundProvider>
-    </CanonProvider>
-  );
+  return <PlaygroundProvider>{children}</PlaygroundProvider>;
 };