https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern

🌠A Hero Patterns achievement for VuePress
https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern

svg svg-patterns vuepress vuepress-plugin

Last synced: about 2 months ago
JSON representation

🌠A Hero Patterns achievement for VuePress

• Host: GitHub
• URL: https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern
• Owner: xiaoluoboding
• License: mit
• Created: 2020-03-27T14:24:15.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-03-28T06:44:17.000Z (over 4 years ago)
• Last Synced: 2024-10-12T02:42:56.572Z (3 months ago)
• Topics: svg, svg-patterns, vuepress, vuepress-plugin
• Language: Vue
• Homepage: https://codesandbox.io/s/vuepress-plugin-hero-pattern-o1ebr?fontsize=14&hidenavigation=1&theme=dark&view=preview
• Size: 887 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vuepress Plugin HeroPattern



  

    

  





  

  

  



Register a global `` component for VuePress.

This component generate a seemless SVG background pattern as a background image.

> This plugin is a VuePress implementation of [Hero Patterns](http://www.heropatterns.com/), All 87 unstyled svg icons is optimized with svgo.

## See Demo on CodeSandbox

[![Edit vuepress-plugin-hero-pattern](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vuepress-plugin-hero-pattern-o1ebr?fontsize=14&hidenavigation=1&theme=dark)

## Installation

```bash

yarn add vuepress-plugin-hero-pattern -S

or

npm i vuepress-plugin-hero-pattern -S

```

## Register the plugin

```js

...

module.exports = {

  ...,

  plugins: {

    ['hero-pattern']

  },

  ...

}

...

```

## Usage

### Default

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

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

```vue

```

### Pick a Pattern

Hero Pattern provide 87 kinds of pattern you can choose, check [pattern list](https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern/tree/master/assets/icons)

```vue

```

### With the custom slot

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

```vue

  


    All Posts

  


```

## API

| Props | Description | Type | Default |

| :---: | :---------: | :--: | :-----: |

| pattern | 87 kinds of patterns that Hero Patterns supported, check [pattern list](https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern/tree/master/assets/icons) | 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

`` component provide a custom slot, you can write some element on the generated pattern.

## Related VuePress Plugin

* [vuepress-plugin-geopattern](https://github.com/xiaoluoboding/vuepress-plugin-geopattern) - GeoPattern is a geopattern adapter for VuePress.

## License

MIT @ [xiaoluoboding](https://github.com/xiaoluoboding)