docs: Update README

packages/bezier-icons/README.md

@@ -55,8 +55,12 @@ If you need to validate the icon source component, use the utility function `isB
 ```tsx
 import { isBezierIcon, AllIcon } from '@channel.io/bezier-icons'
 
+function FooIcon() {
+  return (<svg />)
+}
+
 console.log(isBezierIcon(AllIcon)) // true
-console.log(isBezierIcon(<svg />)) // false
+console.log(isBezierIcon(FooIcon)) // false
 ```
 
 ## Contributing

packages/bezier-react/.storybook/preview-head.html

@@ -1 +1,2 @@
-<link rel="preload stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css">
+<link rel="preconnect" href="https://cf.channel.io" />
+<link rel="stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css" />

packages/bezier-react/README.md

@@ -7,46 +7,65 @@ Bezier React is a React components library that implements Bezier design system.
 ### npm
 
 ```bash
-npm i @channel.io/bezier-react styled-components@5
-npm i -D @types/styled-components@5
+npm i @channel.io/bezier-react
 ```
 
 ### yarn
 
 ```bash
-yarn add @channel.io/bezier-react styled-components@5
-yarn add -D @types/styled-components@5
+yarn add @channel.io/bezier-react
 ```
 
 ### pnpm
 
 ```bash
-pnpm install @channel.io/bezier-react styled-components@5
-pnpm install -D @types/styled-components@5
+pnpm install @channel.io/bezier-react
 ```
 
-**bezier-react has [styled-components](https://styled-components.com/) as peer dependency** so don't forget to install it.
-
 ## Usage
 
-1. Wrap `BezierProvider` at the root of your application.
-2. Pass the `foundation` value like `LightFoundation` or `DarkFoundation`.
+### 1. CSS import
+
+In order to use bezier-react's styles, you need to import CSS. If you're using the module bundler, you can import CSS directly from within your JavaScript file.
+
+```tsx
+import "@channel.io/bezier-react/styles.css"
+```
+
+Or if you're not using the module bundler, you can add the CSS directly to your HTML. We recommend referring to your styles file and copy-pasting it. As bezier-react updates, your styles should update with it.
+
+```html
+<link rel="stylesheet" href="styles.css" />
+```
+
+### 2. Wrap `AppProvider`
+
+Wrap `AppProvider` at the root of your application. If necessary, you can change the theme by specifying the `themeName` property.
 
 ```tsx
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { BezierProvider, LightFoundation, Text } from '@channel.io/bezier-react'
+import { AppProvider, Text } from '@channel.io/bezier-react'
 
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container)
 
 root.render(
-  <BezierProvider foundation={LightFoundation}>
+  <AppProvider themeName="dark">
     <Text as="h1">Hello World</Text>
-  </BezierProvider>,
+  </AppProvider>,
 )
 ```
 
+### 3. Font import
+
+Import font from CDN of Channel Corp. Or you can import it from [Google Fonts](https://fonts.google.com/specimen/Inter).
+
+```html
+<link rel="preconnect" href="https://cf.channel.io" />
+<link rel="stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css" />
+```
+
 ## Contributing
 
 See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute).