CODEWITHSUNDEEP
htmlcssfunctioncode-reuse
Devansh Soni
Devansh Soni

Reputation: 771

Is there any way to use the same code multiple times in HTML (Code Reusability)?

I am making 'Projects' Page for my Portfolio website, I am adding a SVG Icon before the every Project's name. Since the code for SVG Icon is very large, I want something which can do something similar to what functions do in programming languages but I don't know how to do it.

Here's a part of my code:

 <section>
    <div class="container">
        <div class="row">
            <div>
                <h5 class="card-title">
                    <svg role="img" viewBox="0 0 20 20" height="20px" width="20px">
                        <path fill="#000000" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
                        </path>
                    </svg>
                </h5>
                <!-- More Stuff here -->
            </div>

            <div>
                <h5 class="card-title">
                    <svg role="img" viewBox="0 0 20 20" height="20px" width="20px">
                        <path fill="#000000" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
                        </path>
                    </svg>
                </h5>
                <!-- More Stuff here -->
            </div>
        </div>
    </div>
</section>

This snippet contains two SVG icons but there are lot more icons in the page (having larger code) which are used multiple times. So, it is inefficient to write the same code multiple times. It would be nice if we have to write code only once and then it can be used anywhere in the whole HTML file.

I've seen a few answers but they are using JQuery, Php etc. I am wondering if this can be done using HTML/CSS/Bootstrap only.

If not, then Is it possible to do it with JavaScript (I am a beginner in JS).

In case you need to check the whole code: https://devansh-07.github.io/projects.html

Upvotes: 0

Views: 1371

Answers (3)

Carlos Eduardo Salazar Mori
Carlos Eduardo Salazar Mori

Reputation: 412

You can use Blade Templates with Laravel, also Twig Templates with Symfony, and you can also doing this in Django. If you have a MVC framework, there is a way to use views in all controller. Like CodeIgniter 3 calling with $this->view('route..', $data);. Then you can pass to all of them variables with the svg large code, and printing in the template.

In Laravel Blade is like this:

@include('route/viewname', ['svgcode' => '...'])

In Symfony Twig is like this:

{% include 'route/viewname.twig' 
     with {'svgcode': '...'} %}

In PHP without framework:

<?php
  $svgcode = '...';
  include 'route/viewname.php';
?>

In CodeIgniter 3:

$data['svgcode'] = '...'
$this->view('route/viewname', $data);

In Django:

{% include "route/viewname.html" with svgcode = "..." %}

Upvotes: 0

Marcelo Viana
Marcelo Viana

Reputation: 314

You can use this snippet. Insert it before the </body> tag in your document. Than you can remove the svg from your original markup.

<script>
document.addEventListener('DOMContentLoaded', function(){
   var titles = document.querySelectorAll('.card-title');
    for (i=0;i<titles.length;i++) {
        var span = document.createElement('span');
        span.innerHTML = '<svg role="img" viewBox="0 0 20 20" height="20px" width="20px"><path fill="#ffffff" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>';
        titles[i].prepend(span);
    }
})
</script>

Upvotes: 1

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

I'd completely remove svg files from your html (it's semantic drag) so I'd define one class with and then auto prepend it to h5 or that class, see demo below

CSS native purpose was just that: define it once - reuse x times! but people tend to forget it this days because of plethora of frameworks and what not ..

.card-title::before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' role='img' viewBox='0 0 20 20' height='20px' width='20px'%3E%3Cpath fill='%23000000' d='M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z'%3E%3C/path%3E%3C/svg%3E");
}
<section>
  <div class="container">
    <div class="row">
      <div>
        <h5 class="card-title">
          Title 1
        </h5>
        <!-- More Stuff here -->
      </div>

      <div>
        <h5 class="card-title">
          Title 2
        </h5>
        <!-- More Stuff here -->
      </div>
    </div>
  </div>
</section>

I've converted your svg with help of this great and free SVG > CSS online converter - give it a try here if needed for other tasks

https://yoksel.github.io/url-encoder/

you are welcome :)

Upvotes: 2

Related Questions