VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(markdown): Restructuring dev docs

Browse source
This commit is contained in:
Joost De Cock 2021-12-27 17:33:49 +01:00
parent 9ef46c502a
commit d42d9a9377
114 changed files with 246 additions and 1462 deletions
Download patch file Download diff file Expand all files Collapse all files

34
markdown/dev/reference/plugins/theme/en.md
View file

@ -1,25 +1,20 @@
---
title: theme
title: "@freesewing/plugin-theme"
---
[![Run-time plugin](https://img.shields.io/badge/Type-run--time-lime.svg)](/plugins)
 
[![License: MIT](https://img.shields.io/npm/l/@freesewing/plugin-theme.svg?label=License)](https://www.npmjs.com/package/@freesewing/plugin-theme)
 
[![Code quality on DeepScan](https://deepscan.io/api/teams/2114/projects/2993/branches/23256/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=2114&pid=2993&bid=23256)
 
[![Open issues tagged pkg:plugin-theme](https://img.shields.io/github/issues/freesewing/freesewing/pkg:plugin-theme.svg?label=Issues)](https://github.com/freesewing/freesewing/issues?q=is%3Aissue+is%3Aopen+label%3Apkg%3Aplugin-theme)
The **@freesewing-plugin-theme** plugin provides CSS styling for SVG output.
It leverages [the preRender lifecycle hook](/reference/api/hooks/prerender) to
accomplish this.
The **theme** plugin provides CSS styling for SVG output:
<Example pattern="rendertest" part="test" caption="An example of the styles provided by this plugin" design={false} />
It uses the [`preRender`](/plugins#prerender) hook to do so.
<Note>
This plugin only applies to rendered SVG output. If you use our React component to display
patterns, you should style our component or use our [css-theme](/reference/packages/css-theme) package.
##### Only applies to SVG/PS/PDF output
This plugin will inject CSS in the SVG document when rendering to SVG.
If you use other ways to render your pattern (like our React component)
you will need to apply your own styles.
</Note>
@ -31,14 +26,15 @@ npm install @freesewing/plugin-theme
## Usage
Like all [build-time plugins](/guides/plugins/#build-time-plugins), you load them
by passing them to the [`freesewing.Design`](/reference/api#design) constructor:
Like all [run-time plugins](/guides/plugins/types-of-plugins#run-time-plugins), you
load them by by passing them to the `use()` method of an instatiated pattern.
That method is chainable, so if you have multiple plugins you can just chain them together.
```js
import Aaron from "@freesewing/aaron";
import theme from "@freesewing/plugin-theme";
const myAaron = new Aaron()
.use(theme);
const myAaron = new Aaron().use(theme);
```