Register a global <HeroPattern /> component for VuePress.
This component generate a seemless SVG background pattern as a background image.
This plugin is a VuePress implementation of Hero Patterns, All 87 unstyled svg icons is optimized with svgo.
yarn add vuepress-plugin-hero-pattern -S
or
npm i vuepress-plugin-hero-pattern -S...
module.exports = {
...,
plugins: {
['hero-pattern']
},
...
}
...I pick line-to-motion as the preset pattern.
Only background image, you must give the height of the element
<HeroPattern style="height: 160px;" />Hero Pattern provide 87 kinds of pattern you can choose, check pattern list
<HeroPattern
style="height: 160px;"
pattern="glamorous"
fill-color="#FAF5FF"
background-color="#553C9A"
fill-opacity=".66"
/>In the case, you can let the slot element control the pattern's height
<hero-pattern>
<div style="padding: 64px; font-size: 2rem; font-weight: bold; color: white;">
All Posts
</div>
</hero-pattern>| Props | Description | Type | Default |
|---|---|---|---|
| pattern | 87 kinds of patterns that Hero Patterns supported, check pattern list | String | line-to-motion |
| fillColor | Controls the foreground color of the generated image. | String | #9c92ac |
| fillOpacity | Controls the foreground opacity of the generated image. | String | 0.4 |
| backgroundColor | Controls the background color of the generated image. | String | #dfdbe5 |
| repeat | Controls how the background repeated of the generated image. | String | repeat |
<HeroPattern /> component provide a custom slot, you can write some element on the generated pattern.
- vuepress-plugin-geopattern - GeoPattern is a geopattern adapter for VuePress.
MIT @ xiaoluoboding