p006/api/img/octicons/10.0.0/lib/octicons_react/pages/index.js

57 lines
1.5 KiB
JavaScript
Raw Normal View History

2022-11-29 22:06:03 +05:00
import React from 'react'
import {Block, Text} from 'primer-react'
import pkg from '../package.json'
import Octicon, {iconsByName} from '../'
export default function App() {
const sizes = ['small', 'medium', 'large']
return (
<Block p={4}>
<table className="data-table">
<thead>
<tr>
<th>key</th>
<th>import</th>
<th>small, medium, large</th>
<th>code sample</th>
</tr>
</thead>
<tbody>
{Object.keys(iconsByName).map(key => {
const Icon = iconsByName[key]
return (
<tr key={key}>
<td>
<Text mono nowrap>
{key}
</Text>
</td>
<td>
<Text mono nowrap>
{Icon.name}
</Text>
</td>
<td>
{sizes.map(size => (
<Text mr={4} key={size}>
<Octicon icon={Icon} size={size} verticalAlign="middle" />
</Text>
))}
</td>
<td>
<pre>
{`
import Octicon, {${Icon.name}} from '${pkg.name}'
export default () => <Octicon icon={${Icon.name}} />
`.trim()}
</pre>
</td>
</tr>
)
})}
</tbody>
</table>
</Block>
)
}