Skip to content

Instantly share code, notes, and snippets.

@LuckyGeck
Created September 18, 2023 15:36
Show Gist options
  • Save LuckyGeck/a85dc2b481147c517598c043c7686897 to your computer and use it in GitHub Desktop.
Save LuckyGeck/a85dc2b481147c517598c043c7686897 to your computer and use it in GitHub Desktop.
How to add a rotating marker in VSCode
const m = `<svg width="15" viewBox="-5 6 63 59" xmlns="http://www.w3.org/2000/svg" fill="#79A9FF">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0015 30.2705C46.9355 29.0089 45.911 28.5137 44.8451 28.1635C43.7213 28.8686 42.349 29.146 41.0359 29.146C39.6395 29.146 37.0351 28.8123 34.8694 26.6497C34.3226 26.106 33.9488 25.2533 33.6955 24.308C33.0385 24.2411 32.3786 24.2061 31.7183 24.2029C31.1313 24.2029 30.4547 24.2369 29.7349 24.308C29.4815 25.2533 29.1077 26.106 28.5609 26.6497C26.3983 28.8123 23.7909 29.146 22.3945 29.146C21.0811 29.146 19.7053 28.8717 18.5821 28.1635C17.5197 28.5126 16.4995 29.0161 16.4319 30.2705C16.262 33.8318 16.3251 37.388 16.2713 40.9505C16.2761 41.6416 16.6926 42.2835 17.3217 42.5694C22.4346 44.8988 27.2695 46.0728 31.7183 46.0728C36.1608 46.0728 40.9957 44.8988 46.1056 42.5694C46.7347 42.2835 47.1512 41.6416 47.156 40.9505C47.2173 37.3942 47.1679 33.8234 46.9984 30.2705H47.0015ZM17.3804 25.312C18.2145 26.1462 19.7901 26.7022 21.4893 26.7022C22.7868 26.7022 25.2583 26.4242 27.2973 24.3543C28.1933 23.4893 28.7494 21.3267 28.6876 19.1332C28.6258 17.3723 28.1315 15.9202 27.39 15.3024C26.5868 14.5918 24.764 14.2829 22.725 14.4682C20.5625 14.6845 18.7397 15.3951 17.8129 16.3837C15.8048 18.5771 16.2373 24.138 17.3804 25.312ZM29.9851 19.9056C30.0469 20.2454 30.0778 20.6161 30.1087 21.0178C30.1087 21.2958 30.1087 21.5738 30.0778 21.8828C30.6957 21.821 31.2209 21.821 31.7152 21.821C32.2095 21.821 32.7347 21.821 33.3526 21.8828C33.3217 21.5738 33.3217 21.2958 33.3217 21.0178C33.3526 20.6161 33.3834 20.2454 33.4452 19.9056C32.7965 19.8438 32.2095 19.8129 31.7152 19.8129C31.2209 19.8129 30.6339 19.8438 29.9851 19.9056ZM34.7428 19.1332C34.681 21.3267 35.2371 23.4893 36.133 24.3543C38.172 26.4242 40.6435 26.7022 41.9411 26.7022C43.6402 26.7022 45.2158 26.1462 46.05 25.312C47.1931 24.138 47.6256 18.5771 45.6175 16.3837C44.6906 15.3951 42.8679 14.6845 40.7053 14.4682C38.6663 14.2829 36.8436 14.5918 36.0403 15.3024C35.2989 15.9202 34.8046 17.3723 34.7428 19.1332ZM56.4303 32.7884V38.3276C56.429 39.0429 56.0744 39.7402 55.4973 40.1627C48.6847 45.1502 40.2785 49.1622 31.7152 49.1622C22.2412 49.1622 12.7559 43.7029 7.933 40.1627C7.35592 39.7402 7.0014 39.0429 7 38.3276V32.7884C7 32.0593 7.2317 31.3549 7.66113 30.7679L9.16567 28.732C9.97145 27.6396 11.1698 27.351 12.4466 27.351C12.9286 21.8519 14.0685 17.9284 16.7934 15.0552C21.9836 9.55609 28.8729 9 31.7152 9C34.5574 9 41.4468 9.55609 46.637 15.0552C49.3587 17.9284 50.5018 21.8519 50.9837 27.351C52.2631 27.351 53.4562 27.6347 54.2616 28.732L55.7661 30.771C56.1986 31.358 56.4303 32.0593 56.4303 32.7884Z" />
<path d="M24.5066 34.6951C24.5066 33.5851 25.4064 32.6854 26.5163 32.6854C27.6262 32.6854 28.526 33.5851 28.526 34.6951V38.3992C28.526 39.5091 27.6262 40.4089 26.5163 40.4089C25.4064 40.4089 24.5066 39.5091 24.5066 38.3992V34.6951Z" />
<path d="M34.8046 34.6951C34.8046 33.5851 35.7043 32.6854 36.8143 32.6854C37.9242 32.6854 38.824 33.5851 38.824 34.6951V38.3992C38.824 39.5091 37.9242 40.4089 36.8143 40.4089C35.7043 40.4089 34.8046 39.5091 34.8046 38.3992V34.6951Z" />
<animateTransform attributeName="transform" type="rotate" from="0 30 30" to="360 30 30" dur="1s" repeatCount="indefinite" />
</g>
</svg>`
// Convert the SVG string to a data URI
const svgDataUri = `data:image/svg+xml;base64,${btoa(m)}`
// Create a new image element
const img = new Image()
// Set the data URI as the source
img.src = svgDataUri
// Append the image to the DOM
document.body.appendChild(img)
// gutterIconPath: svgDataUri
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment