# thumbnails
**Repository Path**: mirrors_antvis/thumbnails
## Basic Information
- **Project Name**: thumbnails
- **Description**: Thumbnail images for different chart types from Chart Knowledge Base.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-10
- **Last Updated**: 2026-02-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# AntV/Thumbnails
Thumbnail images for different chart types from [CKB](https://github.com/antvis/AVA/tree/master/packages/knowledge).
## Usage
### Use as Data in Object
```ts
import Thumbnails from '@antv/thumbnails';
if (Thumbnails.pie_chart) {
const { id, name, svgCode } = Thumbnails.pie_chart;
console.log(id, name, svgCode);
}
});
```
```ts
import { BAR_CHART } from '@antv/thumbnails';
const { id, name, svgCode } = BAR_CHART;
console.log(id, name, svgCode);
```
The ChartIDs are listed in: [AVA/CKB](https://github.com/antvis/AVA/blob/master/packages/knowledge/src/chartID.ts).
### Use as React Component
```tsx
import Thumbnails, { Thumbnail, PIE_CHART } from '@antv/thumbnails';
// Thumbnail is the React Component
// ...
// define a chart id from 'AVA/CKB'
// get the svg code from Thumbnails object
// get the svg code from specific chart thumbnail object
// with other img HTML attributes
```
For example:
```tsx
import * as React from 'react';
import Thumbnails, { Thumbnail } from '@antv/thumbnails';
class App extends React.Component<{}> {
constructor(props: {}) {
super(props);
}
public render() {
return (
);
}
}
export default App;
```
## Development
Run this command to setup all:
```bash
npm run one-stop-setup
```
Run this command and then visit .
```bash
npm run start:demo
```
If you can see the demo page well, it means that all setups have been successfully completed.
