Exploring the versatility of using SVGs as reusable components

My page boasts a 5-star rating that I want to leverage

Is there a way to reuse my SVG as a component?

I'm keen on understanding how this can be done.

<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill bg-golden" viewBox="0 0 16 16">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill bg-golden" viewBox="0 0 16 16">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
    <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
    <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
    <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg>
htmlcssxhtml

Answer №1

To easily incorporate your .svg file into your project, simply place it in the project folder and then specify a relative path to it within the src attribute of the img tag in your .html file.

<div>
    <img src="../mysvg.svg"/>
    <img src="../mysvg.svg"/>
    <img src="../mysvg.svg"/>
    <img src="../mysvg.svg"/>
    <img src="../mysvg.svg"/>
</div>

If you do not require inline svg-s, this approach works well. Alternatively, you can explore using the svg tag for incorporating svg-s.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to create a navigation search bar using HTML/CSS or Bootstrap

Seeking advice on how to recreate this UI layout. Does anyone have suggestions or know of any helpful resources? I am particularly struggling with linking the search bar to the navbar. https://i.sstatic.net/PMI2w.png ...

htmlcsstwitter-bootstrap

Sideways scrolling carousel/slider

Currently, I am in the midst of a project page where my aim is to incorporate a horizontal scrolling project/image slider. Strangely enough, all my attempts thus far have failed to produce the desired outcome. This is the layout: the projects must transit ...

javascripthtmlcsstailwind-csshorizontal-scrolling

Is it possible for a client to change the values stored in localStorage?

I'm exploring the use of localStorage instead of cookies to allow users to remain signed in on my website, as I dislike the use of cookies. My current plan is to store the user's username in localStorage, then have the site check if there is any ...

htmllocal-storage

The find element will yield an empty result when using XPath contains with Text() method

When checking for Gender and Date in the assertion, it returns false and the IWebElement displays an empty string. This anomaly only occurs with Gender and Date, while the rest provide accurate results. CODE IWebElement actualname = BrowserHelper.WebDri ...

c#htmlseleniumselenium-webdriverxpath

Alignment issues with Bootstrap icons

I am attempting to line up my text with an icon. I have researched various methods on a website for help. Here is the current state of my project This is the code I am currently using: <div class = "row"> <div class = "col-md-8"> ...

cssruby-on-railsbootstrap-4

Positioning elements next to each other in jQuery on mouse over - while also addressing scrolling issues in a div

After tinkering with this interesting concept of mouseover combined with absolute positioning divs on a jsFiddle, I encountered some unexpected results. The code was inspired by a stackoverflow thread on positioning one element relative to another using j ...

javascriptjquerycssscrollbaronmouseover

Display issue with Google Chart

Could someone please help me identify why these charts are not showing up? This code was functioning properly in a previous project. I copied the same code to a new project, only adding the master page. However, now the charts are not appearing. All I can ...

javascriptc#htmlasp.netgoogle-visualization

What is the process of extracting images from HTML code and verifying their presence on my web server?

Recently, I've been working on a post editor where I need to generate thumbnails from images inserted in the HTML code. But before diving into that task, I want to extract all basic image attributes. For example: $mydomain = 'mysite.com'; ...

phphtmlregeximage

Ways to switch the state of one element while causing other elements to respond

Here is the code snippet I am working with: function myFunction(x) { x.classList.toggle('change'); } body, hmtl { background- color: black; } .text { color: Black; } a { text-decoration: none; } .container { display: inline-block; ...

javascripthtmlcss

What is the impact of using overflow: hidden on block elements?

HTML <div class="top"><p>hello</p></div> <div class="bottom"><p>hello</p></div> CSS .bottom { overflow: hidden; } While delving into the world of CSS, I encountered an interesting qu ...

htmlcss

What's the best way to format my blog post with HTML in Django?

I am looking to integrate HTML formatting directly into my blog post from the admin page. In the models.py file, you can see that the description field is set as a TextField. My goal is to have the ability to include HTML tags in my blog post content on th ...

pythonhtmldjangodjango-modelsdjango-templates

Revise HTML list on Android through Simperium synchronization

As a newcomer to utilizing Simperium, I have high hopes that it will meet my needs. Since the website primarily offers tutorials and examples for IOS, I figured this would be the best place to seek assistance. My goal is to be able to modify and update an ...

androidhtmlsimperium

Attempting to recreate the dynamic banner featured in the video

Looking to replicate a setup similar to what was demonstrated in the video. I have two div blocks - one with a random image and the other with a video, and I want them to be as flexible and identical as possible to the video layout. How should I go about a ...

javascripthtmlcssweb

How can I use JavaScript to optimize and cache an HTML video element when the streaming size exceeds the file size?

Currently, I have successfully set up a video streaming feature using a NodeJS server. The issue I am facing is related to the video size, which is 61MB. Whenever I adjust the range in the HTML video element, it triggers another fetch request, leading to a ...

javascripthtmlreactjsvideo-streaminghtml5-video

Is it possible to refine an HtmlNodeCollection by the content of a specific child element's InnerText?

I am working with an HtmlNodeCollection named var searchResults that I extracted from a website using HtmlAgilityPack. Below is a snippet showing 3 Nodes from the collection (there are more of course): /* HTML code snippet here */ My goal is to filter ou ...

c#htmlhtml-agility-pack

Tips for activating a function during a click on the download button within an audio tag in HTML

Is there a way to track the number of downloads when using an audio tag with a download option? Which event handler should I use for this task and how can I implement it? I have already set up a fully functional back end API, but I am struggling to unders ...

htmlreactjs

How to use PHP for setting up a MySQL database?

Currently, I am immersing myself in the world of PHP and MySQL. I decided to take a shot at creating a basic HTML form along with a PHP script to set up a MySQL database. Unfortunately, when I tried to test it out, things didn't go as planned. Upon su ...

phphtmlmysqlforms

Tips for maintaining the webcam video in the center of the screen even when the height is set to 100% and the window is being resized

When using React, I encountered an issue with centering a webcam video while maintaining its height at 100% of the screen. Although the video fills the screen vertically correctly, adjusting the width of the window causes the video to lose its centered pos ...

htmlcssreactjs

When submitting a form in HTML, ensure that the input checkbox returns 'On' instead of 'True'

My MVC3 app is using Project Awesome from http://awesome.codeplex.com/, but I'm encountering a strange issue with checkboxes. Inside a Modal popup, I have the following simple Html code: <input type="checkbox" class="check-box" name="IsDeleted"> ...

javascriptjqueryhtml

bootstrap 4 grid of responsive cards

I am attempting to replicate the layout of CodePen's dashboard or, if you do not have an account, you can view CodePen's home screen. My goal is to create a dynamic list of cards that are responsive and adjust the number of cards displayed in a ...

htmlcssbootstrap-4responsive