• Stars
    star
    170
  • Rank 223,357 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A very simple placeholder image generator with zero dependencies.

Simple SVG Placeholder

NPM version Build Status Renovate

A very simple placeholder image generator with zero dependencies. Returns a data URI (or raw SVG source) as a string for use in templates.

Getting Started

The package is available to install via npm:

npm i --save @cloudfour/simple-svg-placeholder

Once installed, you may import the function as an ES or CommonJS module:

// Module
import simpleSvgPlaceholder from '@cloudfour/simple-svg-placeholder';

// CommonJS
const simpleSvgPlaceholder = require('@cloudfour/simple-svg-placeholder');

Then call the function to generate placeholder SVGs:

const placeholder = simpleSvgPlaceholder(/* options */);
// => 'data:image/svg+xml;...'

Examples

Default

simpleSvgPlaceholder();

Dimensions

simpleSvgPlaceholder({
  width: 180,
  height: 135,
});

Text

simpleSvgPlaceholder({
  text: 'Hello world!',
});

Colors

simpleSvgPlaceholder({
  bgColor: '#0F1C3F',
  textColor: '#7FDBFF',
});

Font

simpleSvgPlaceholder({
  fontFamily: 'Georgia, serif',
  fontWeight: 'normal',
});

Option Reference

width {Number}

Defaults to 300, the default width of SVG elements in most browsers.

height {Number}

Defaults to 150, the default height of SVG elements in most browsers.

text {String}

The text to display. Defaults to the image dimensions.

fontFamily {String}

The font to use for the text. For data URIs, this needs to be a system-installed font. Defaults to 'sans-serif'.

fontWeight {String}

Defaults to 'bold'.

fontSize {Number}

Defaults to 20% of the shortest image dimension, rounded down.

dy {Number}

Adjustment applied to the dy attribute of the text element so it will appear vertically centered. Defaults to 35% of the fontSize.

bgColor {String}

The background color of the image. Defaults to #ddd.

textColor {String}

The color of the text. For transparency, use an rgba or hsla color value. Defaults to rgba(0,0,0,0.5).

dataUri {Boolean}

If true, the function will return an encoded string for use as an img element's src value. If false, the function will return the unencoded SVG source. Defaults to true.

charset {String}

Defaults to UTF-8, but if your source HTML document's character set is different, you may want to update this to match.

More Repositories

1

hideShowPassword

Because life's too short to waste time re-typing passwords.
JavaScript
736
star
2

drizzle

A streamlined tool for developing, documenting and presenting UI pattern libraries.
HTML
666
star
3

lighthouse-parade

A Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page.
TypeScript
358
star
4

SimpleSlideView

A nifty little jQuery or Zepto plugin for the simplest of sliding views.
HTML
258
star
5

pleasantest

β›΅ Write real-browser tests with Testing Library in Jest
TypeScript
172
star
6

offCanvasMenu

A jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.
CoffeeScript
139
star
7

pwastats

A directory of Progressive Web App case studies.
HTML
101
star
8

image-compare

A web component for comparing images with a slider.
HTML
62
star
9

transition-hidden-element

A JavaScript utility to help you use CSS transitions when showing and hiding elements with the `hidden` attribute.
JavaScript
52
star
10

elastic-textarea

A web component for progressively-enhanced auto-expanding textareas
JavaScript
35
star
11

image-breakpoints

Given a source image, generate a series of related images at various file sizes.
PHP
28
star
12

guides

Conventions, processes and notes about how we do things
24
star
13

cloudfour.com-patterns

The design system, component library and documentation for cloudfour.com and related projects
MDX
24
star
14

core-hbs-helpers

Handlebars helpers that we usually need
JavaScript
11
star
15

leveller

A jQuery plugin for equalizing element heights.
HTML
10
star
16

lite-model-viewer

A lazy-loaded model-viewer web component
HTML
9
star
17

core-gulp-tasks

⛔️ DEPRECATED Gulp tasks that we usually need
JavaScript
9
star
18

svg-icon-example

JavaScript
8
star
19

constraint-validation-api-demo

Astro
7
star
20

pwa-workshop

The Progressive Web App workshop files
HTML
7
star
21

svg-icon-stress-test

Test page accompanying an article about performance of way too many SVG icons at once.
JavaScript
7
star
22

drizzle-builder

The tool for building a Drizzle.
JavaScript
6
star
23

slides-svg-101

SVG! β™₯β€Ώβ™₯
JavaScript
5
star
24

tpp-research-monorepo

JavaScript
5
star
25

stylelint-config-cloudfour-suit

Cloud Four's shareable config + SUIT naming
JavaScript
4
star
26

eleventy-patterns

(WIP) A boilerplate template used to quickly generate pattern libraries and prototyping environments
JavaScript
4
star
27

eslint-config

JavaScript
4
star
28

smashing-mag-sw

CSS
2
star
29

stylelint-config-cloudfour

Cloud Four's shareable config
JavaScript
2
star
30

code-transform-sandbox

TypeScript
1
star
31

pleasantest-site-sandbox

A design and prototyping sandbox for the new Pleasantest site
Nunjucks
1
star
32

generator-drizzle

Yeoman generator for Drizzle-based projects
JavaScript
1
star
33

generator-core-webapp

Yeoman Generator for core web apps
JavaScript
1
star
34

workshop-here-everywhere

Workshop: How to get from Here to Everywhere (Taking your web skills mobile)
PHP
1
star
35

vite-vue-testing-library

Adding Vue Testing Library to a Vite + Vue 3 installation
Vue
1
star
36

scaffolding-example

A demo of how to write your own automated scaffolding script
JavaScript
1
star
37

sky-nav-cls-pe

Demos for the Sky Nav Cumulative Layout Shift + Progressive Enhancement article
Astro
1
star
38

js-sunrise

Study material and workshop for JavaScript
JavaScript
1
star
39

stencil-backbone-example

TypeScript
1
star