random-color-pearl
v1.0.7
Published
web component for random colored stylish pearl svg
Downloads
19
Maintainers
Readme
Random color pearl
Creating stylish randomly colored pearl using the power of html web components 🪩. Simple and useful for random placeholders for profile pic or avatar.
Figma Plugin for Designers
Install from npm
npm i random-color-pearl
Use Unpkg
<script src="https://unpkg.com/[email protected]/src/randomColorSvg.js"></script>
<!-- OR use minified version -->
<script src="https://unpkg.com/[email protected]/src/randomColorSvg.min.js"></script>
Or Import
import("random-color-pearl");
Then simply use the web component as:
<random-color-svg></random-color-svg>
Attributes
<random-color-svg width="92px" height="92px" username=""></random-color-svg>
Supports the following optional attributes, height and width for sizing the svg, and a username attribute to get a hashed color (optional). Also, it has getter and setter methods for color. Colors attribute is a string of 15 hex color codes.
| Attribute | Description | Default |
| ---------- | --------------------------------------------------- | ----------- |
| width
| Sets the width of the SVG element | 92px
|
| height
| Sets the height of the SVG element | 92px
|
| username
| If provided, hashes the username to generate colors | undefined
|
| colors
| If provided, fills the svg with the given colors | undefined
|
| title
| Adds an accessible title to the svg | avatar
|
Set the Color Values
<random-color-svg
colors="#000000,#1c1c1c,#333333,#4d4d4d,#666666,#808080,#999999,#b3b3b3,#cccccc,#e6e6e6,#f2f2f2,#f5f5f5,#fafafa,#dcdcdc,#c0c0c0"
></random-color-svg>
⚠️ Note: this will not set the color values if
username
is provided already with a truthy value. As basic purpose of profile pic / avatar is to set unique pearls usingusername
attribute, it has preference over thecolors
string.
Get the Color values
document.addEventListener("DOMContentLoaded", () => {
const svg = document.getElementById("pearl-svg");
if (svg instanceof RandomColorSvg) {
svg.getColors(); // Use this as you want!
}
});
Check Performance and Collision Rates here
Contributing
Feel free to open issues or submit pull requests to enhance the functionality of RandomColorSvg
. Contributions are welcome and appreciated!
License
This project is licensed under the MIT License. See the LICENSE file for details.