2021-10-17 18:26:00 +02:00
|
|
|
---
|
2021-12-27 17:33:49 +01:00
|
|
|
title: "@freesewing/plugin-theme"
|
2021-10-17 18:26:00 +02:00
|
|
|
---
|
2021-08-25 16:09:31 +02:00
|
|
|
|
2021-12-27 17:33:49 +01:00
|
|
|
The **@freesewing-plugin-theme** plugin provides CSS styling for SVG output.
|
|
|
|
It leverages [the preRender lifecycle hook](/reference/api/hooks/prerender) to
|
|
|
|
accomplish this.
|
2021-08-25 16:09:31 +02:00
|
|
|
|
2021-12-27 17:33:49 +01:00
|
|
|
<Note>
|
2021-08-25 16:09:31 +02:00
|
|
|
|
2021-12-27 17:33:49 +01:00
|
|
|
##### Only applies to SVG/PS/PDF output
|
2021-08-25 16:09:31 +02:00
|
|
|
|
2021-12-27 17:33:49 +01:00
|
|
|
This plugin will inject CSS in the SVG document when rendering to SVG.
|
2021-08-25 16:09:31 +02:00
|
|
|
|
2021-12-27 17:33:49 +01:00
|
|
|
If you use other ways to render your pattern (like our React component)
|
|
|
|
you will need to apply your own styles.
|
2021-08-25 16:09:31 +02:00
|
|
|
|
|
|
|
</Note>
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm install @freesewing/plugin-theme
|
|
|
|
```
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
2021-12-27 17:33:49 +01:00
|
|
|
Like all [run-time plugins](/guides/plugins/types-of-plugins#run-time-plugins), you
|
2022-02-19 08:04:25 +01:00
|
|
|
load them by by passing them to the `use()` method of an instatiated pattern.
|
2021-12-27 17:33:49 +01:00
|
|
|
|
|
|
|
That method is chainable, so if you have multiple plugins you can just chain them together.
|
2021-08-25 16:09:31 +02:00
|
|
|
|
|
|
|
```js
|
|
|
|
import Aaron from "@freesewing/aaron";
|
|
|
|
import theme from "@freesewing/plugin-theme";
|
|
|
|
|
2021-12-28 09:09:27 +01:00
|
|
|
const pattern = new Aaron().use(theme);
|
2021-08-25 16:09:31 +02:00
|
|
|
```
|