fix(docs): icons in docs not rendered properly

CHANGELOG.md

@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix broken fragments on CodeSandbox @lucivpav ([#1655](https://github.com/stardust-ui/react/pull/1655))
 - Improve a table with component props in docs @layershifter ([#1634](https://github.com/stardust-ui/react/pull/1634))
 - Improve rendering performance for docs examples @Bugaa92 ([#1654](https://github.com/stardust-ui/react/pull/1654))
+- Fix code in Component variables section of Theming page @lucivpav ([#1625](https://github.com/stardust-ui/react/pull/1625))
 
 <!--------------------------------[ v0.34.1 ]------------------------------- -->
 ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11)

docs/src/views/Theming.tsx

@@ -1,11 +1,23 @@
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
-import { Button, Icon, Provider, Text, Animation, Header } from '@stardust-ui/react'
+import {
+  Button,
+  Icon,
+  Provider,
+  Text,
+  Animation,
+  Header,
+  ComponentStyleFunctionParam,
+} from '@stardust-ui/react'
 
 import DocPage from '../components/DocPage/DocPage'
 import ExampleSnippet from '../components/ExampleSnippet/ExampleSnippet'
 import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
 
+type ThemingVariables = {
+  iconColor: string
+}
+
 export default () => (
   <DocPage title="Theming">
     <Header as="h2" content="Overview" />
@@ -87,7 +99,7 @@ export default () => (
       render={() => (
         <>
           <Icon name="user" circular />
-          <Icon name="user" circular variables={{ color: 'cornflowerblue' }} />
+          <Icon name="user" circular styles={{ color: 'cornflowerblue' }} />
         </>
       )}
     />
@@ -97,12 +109,57 @@ export default () => (
       the <NavLink to="components/provider">Provider</NavLink>.
     </p>
     <ExampleSnippet
+      value={`
+        <>
+          <Icon name="user" circular />
+          <Icon name="user" circular />
+
+          <Provider
+            theme={{
+              componentVariables: {
+                Icon: {
+                  iconColor: 'cornflowerblue'
+                  }
+              },
+              componentStyles: {
+                Icon: {
+                  root: ({variables: v, props: p }) => ({
+                    ...({color: v.iconColor})
+                  })
+                }
+              }
+            }}>
+            <span>
+              <Icon name="user" circular />
+              <Icon name="user" circular />
+            </span>
+          </Provider>
+        </>
+      `}
       render={() => (
         <>
           <Icon name="user" circular />
           <Icon name="user" circular />
 
-          <Provider theme={{ componentVariables: { Icon: { color: 'cornflowerblue' } } }}>
+          <Provider
+            theme={{
+              componentVariables: {
+                Icon: {
+                  iconColor: 'cornflowerblue',
+                },
+              },
+              componentStyles: {
+                Icon: {
+                  root: ({
+                    variables: v,
+                    props: p,
+                  }: ComponentStyleFunctionParam<any, ThemingVariables>) => ({
+                    ...{ color: v.iconColor },
+                  }),
+                },
+              },
+            }}
+          >
             <span>
               <Icon name="user" circular />
               <Icon name="user" circular />