[ctrl+alt+n]
Why patternplate
How to use the docs
Guides
Guide: Getting Started (CLI)
Guide: Getting Started (App)
Guide: Build a component
Guide: Write documentation
Guide: Create Virtual folders
Guide: Document with widgets
Guide: Convince with a cover
Advanced
Advanced: Deploy to GitHub
Advanced: Theming
Advanced: Build systems
Reference
Reference: CLI
Reference: Configuration
Reference: Demos
Reference: Documentation
Reference: Renderers
Reference: Widgets
Reference: Search
Reference: Static Files
Roadmap
GitHub
Join us on Gitter
Components
Component: Button
Component: Code
Component: Flag
Component: Headline
Component: Icon
Component: Info Pane
Component: Logo
Component: Main Header
Component: Markdown
Component: Search
Component: Tag
Component: Text
Component: Themes
Main Navigation
Search
Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate
Component: Icon
@3.2.7
[ctrl+alt+o]
Render svg icons
stable
%5B%7B%22base%22%3A1%2C%22config%22%3A2%2C%22pattern%22%3A3%2C%22startBase%22%3A1%2C%22staticBase%22%3A4%2C%22isStatic%22%3A5%2C%22manifest%22%3A6%7D%2C%22%2F%22%2C%7B%22docs%22%3A7%2C%22entry%22%3A8%2C%22render%22%3A9%2C%22mount%22%3A10%2C%22cover%22%3A11%2C%22ui%22%3A12%7D%2C%7B%22id%22%3A13%7D%2C%22%2Fstatic%22%2Ctrue%2C%7B%22client.js%22%3A14%2C%22client.js.map%22%3A15%2C%22vendors~client.js%22%3A16%2C%22vendors~client.js.map%22%3A17%7D%2C%5B18%2C19%5D%2C%5B20%2C21%5D%2C%22%40patternplate%2Frender-styled-components%2Frender%22%2C%22%40patternplate%2Frender-styled-components%2Fmount%22%2C%22%40patternplate%2Fcover%22%2C%7B%22logo%22%3A22%2C%22favicon%22%3A22%2C%22colorBackgroundDark%22%3A23%2C%22colorBackgroundSecondaryDark%22%3A24%2C%22colorBackgroundTertiaryDark%22%3A24%2C%22colorBorderDark%22%3A24%7D%2C%22pattern%2F%40patternplate%2Fcomponent-icon%22%2C%22client.0f905c7d5241d4171ab0.js%22%2C%22client.0f905c7d5241d4171ab0.js.map%22%2C%22vendors~client.e4943ac1c788db405fa2.js%22%2C%22vendors~client.e4943ac1c788db405fa2.js.map%22%2C%22docs%2F**%2F*.md%22%2C%22!docs%2F**%2F*%2Fpatterns%22%2C%22components%2Flegacy%2Flib%2F**%2Fdemo.js%22%2C%22components%2Fnext-generation%2F*%2Fdemo.js%22%2C%22%5Cn%20%20%3Csvg%20height%3D%5C%2230%5C%22%20width%3D%5C%2230%5C%22%20viewBox%3D%5C%220%200%2024%2024%5C%22%20xmlns%3Axlink%3D%5C%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%5C%22%3E%5Cn%20%20%20%20%3Cdefs%3E%5Cn%20%20%20%20%20%20%3ClinearGradient%20id%3D%5C%22gradient%5C%22%20x2%3D%5C%22100%25%5C%22%20y2%3D%5C%22100%25%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%5C%22%23fe0353%5C%22%2F%3E%5Cn%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%5C%22100%25%5C%22%20stop-color%3D%5C%22%23a90392%5C%22%2F%3E%5Cn%20%20%20%20%20%20%3C%2FlinearGradient%3E%5Cn%20%20%20%20%3C%2Fdefs%3E%5Cn%20%20%20%20%3Cpath%20fill%3D%5C%22url(%23gradient)%5C%22%20d%3D%5C%22M12.002%2020.426a1.264%201.264%200%200%201-.675-.189l-9.05-5.63a.86.86%200%201%201%20.906-1.455l8.819%205.494%208.815-5.494a.86.86%200%201%201%20.906%201.456l-9.047%205.643a1.267%201.267%200%200%201-.674.175z%5C%22%3E%3C%2Fpath%3E%5Cn%20%20%20%20%3Cpath%20fill%3D%5C%22url(%23gradient)%5C%22%20d%3D%5C%22M12%2017.055a1.244%201.244%200%200%201-.657-.185l-8.886-5.545a1.193%201.193%200%200%201%200-2.023l8.886-5.542a1.25%201.25%200%200%201%201.314%200l8.886%205.542a1.193%201.193%200%200%201%200%202.023l-8.886%205.541a1.24%201.24%200%200%201-.657.19zm-7.99-6.742l7.99%204.98%207.99-4.98L12%205.334l-7.99%204.98z%5C%22%3E%3C%2Fpath%3E%5Cn%20%20%3C%2Fsvg%3E%5Cn%22%2C%22rgb(15%2C%2015%2C%2050)%22%2C%22rgb(26%2C%2024%2C%2068)%22%5D