# Vuepress Plugin HeroPattern

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.

# See Demo on CodeSandbox

Edit vuepress-plugin-hero-pattern

# Installation

yarn add vuepress-plugin-hero-pattern -S
npm i vuepress-plugin-hero-pattern -S

# Register the plugin

module.exports = {
  plugins: {

# Usage

# Default

I pick line-to-motion as the preset pattern.

Only background image, you must give the height of the element

<HeroPattern style="height: 160px;" />

# Pick a Pattern

Hero Pattern provide 87 kinds of pattern you can choose, check pattern list

  style="height: 160px;"

# With the custom slot

In the case, you can let the slot element control the pattern's height

  <div style="padding: 64px; font-size: 2rem; font-weight: bold; color: white;">
    All Posts


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

# Slot

<HeroPattern /> component provide a custom slot, you can write some element on the generated pattern.

# License

MIT @ xiaoluoboding

Made with ❤️ by Ahmad Mostafa - @z3by