Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML Demo Page #3

Open
styfle opened this issue Jun 10, 2017 · 4 comments · May be fixed by #7
Open

HTML Demo Page #3

styfle opened this issue Jun 10, 2017 · 4 comments · May be fixed by #7

Comments

@styfle
Copy link
Contributor

styfle commented Jun 10, 2017

@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
Copy link
Owner

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

@styfle
Copy link
Contributor Author

styfle commented Jun 12, 2017

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
Copy link
Contributor Author

styfle commented Aug 9, 2017

@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
Copy link
Contributor Author

styfle commented Oct 5, 2017

@markhuge Any update?

styfle added a commit to styfle/svg-social-icons that referenced this issue May 10, 2020
@styfle
Add link to demo page
d4e56b2 
Fixes markhuge#3
@styfle styfle linked a pull request May 10, 2020 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add link to demo page styfle/svg-social-icons
2 participants
@styfle @markhuge