search

markhuge / svg-social-icons

svg
18 stars 5 forks source link

HTML Demo Page #3

Open styfle opened 7 years ago

styfle commented 7 years ago

@markhuge Would you be interested in creating a demo page for GitHub Pages? I can create a PR.

I added something like the following to generate HTML:

var icons = require('./lib/icons.json');

function getHtml(network, opts) {
  var data = icons[network];

  var opts            = opts || {},
      svgClass        = opts.svgClass        || 'social-svg',
      backgroundClass = opts.backgroundClass || 'social-svg-background',
      iconClass       = opts.iconClass       || 'social-svg-icon',
      maskClass       = opts.maskClass       || 'social-svg-mask',
      color           = opts.color           || data.color;

  return '<svg class="' + svgClass + '" viewBox="0 0 64 64" ><g class="' + backgroundClass + '" ><circle cx="32" cy="32" r="31" ></circle></g><g class="' + iconClass + '" ><path d="' + data.icon + '" ></path></g><g class="' + maskClass + '" style="fill:' + color + '" ><path d="' + data.mask +'" ></path></g></svg>';
};

var html = `<style>

.social-svg {
    fill: white;
    width: 32px;
    height: 32px;
}
table {
  font-size: 20px;
  margin: auto;
}

td:first-child {
  text-align: right;
}
</style>
</head>
<body>
`;
html += '<table class="table">';
for (var p in icons) {
  html += `<tr><td>${p}</td><td>${getHtml(p)}</td></tr>`;
}
html += `</table>
</body>
</html>`;

var fs = require('fs');
fs.writeFileSync('./demo.html', html, 'utf8');
markhuge commented 7 years ago

There's already a demo page up =D http://markhuge.github.io/svg-social-icons/

styfle commented 7 years ago

I can't believe I missed that.

image

Can you add that URL to the "website" field at the top of the repo?

image

styfle commented 7 years ago

@markhuge Can you add the link to the main page? I forgot how to get to it again and realized I already made an issue.

styfle commented 6 years ago

@markhuge Any update?