# 预设的提炼与使用

## 介绍

预设作为配置的一种，你可以把你的配置提炼出来，做成一个预设

```js filename="icestack.config.cjs"
/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  presets: [myPreset, myFunctionPreset(options)]
}
module.exports = config
```

## 预设的定义

类型为:

```ts
// Partial<Pick<CodegenOptions, 'base' | 'components' | 'global' | 'tailwindcssConfig'>>

import type { Preset } from '@icestack/types'

/**
 * @type {import('@icestack/types').Preset}
 */

const myPreset: Preset = {}

const myFunctionPreset: () => Preset = () => {
  return {}
}
```

## Examples

### Add A Component

```js
const myFunctionPreset = () => {
  return {
    components: {
      myCustom: {
        selector: '.cutsom',
        schema: ({ selector, types, params }) => {
          return {
            selector,
            defaults: {
              // your css code here
              base: ``,
              styled: ``,
              utils: ``
            }
          }
        }
      }
    }
  }
}
```
