JSFiddle - React, Tailwind, and code Playground

by R Omer

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/SVGLoader.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="container">
        <div id="row" class="row"></div>
    </div>
    <div id="modal_code" class="modal fade" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">CODE</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <h6>var icon = await fetchIcon(&#39;<span id="span_sel_icon">Text</span>&#39;);</h6>
                    <h6>scene.add(icon);</h6>
                    <hr />
                    <p id="p_code" style="white-space: pre;">async function fetchIcon(iconName) {
                        if (!iconName) return;

                        try {
                        const response = await fetch(&#39;https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/metadata/icons.json&#39;);
                        const data = await response.json();

                        if (data[iconName]) {
                        const icon = data[iconName];
                        const loader =...

JavaScript

let selectedIcon = null;
fetch('https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/metadata/icons.json')
	.then(async function (response) {
		const icons = await response.json();
		console.log('icons', icons)
		// Load icons and create buttons
		$(document).ready(function () {
			loadIcons();
			setupEventHandlers();
			setupThreeJS();
		});

		function loadIcons() {
			Object.keys(icons).forEach(iconKey => {
				const icon = icons[iconKey];
				const rawSvg = icon.svg?.brands?.raw || icon.svg?.regular?.raw || icon.svg?.solid?.raw || 'Not available';
				$('#row').append(`
          <div class="col text-center border p-3">
            <h6>${iconKey}</h6><br>
            <button data-icon="${iconKey}" class="btn-icon w-100 th-100">${rawSvg}</button>
          </div>
        `);
			});
		}

		function setupEventHandlers() {
			$(document).on("click", '.btn-icon', function () {
				selectedIcon = $(this).data('icon');
				$('#span_sel_icon').text(selectedIcon);
				$('#modal_code').modal('show');
			});

			$('#btn_preview').click(async function () {
				$('#modal_preview').modal('show');
				updateScene();
			});
		}

		async function fetchIcon(iconName) {
			if (!iconName) return;

			try {
				const data = icons;

				if (data[iconName]) {
					const icon = data[iconName];
					const loader = new THREE.SVGLoader();
					const svgString = icon.svg['brands']?.raw || icon.svg['solid']?.raw || icon.svg['regular']?.raw;
					const iconGroup = new THREE.Group();

					// Load SVG data
					loader.parse(svgString).paths.forEach((path) => {
						path.toShapes(true).forEach((shape) => {
							const mesh = new THREE.Mesh(new THREE.ShapeGeometry(shape), new THREE.MeshBasicMaterial({
								color: 0xff0000,
								side: THREE.DoubleSide,
								depthWrite: false
							}));
							iconGroup.add(mesh);
						});
					});

					// Center the iconGroup
					const box = new...