Modifying the outline color of SVG icons against various backgrounds

Is there a way to change the color of my SVG icon based on its background? I have this star icon with the following code:

<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5344 5.82104L19.7321 12.087L26.6796 13.1919L21.7084 18.1694L22.8045 25.1183L16.5344 21.9286L10.2644 25.1183L11.3604 18.1694L6.38928 13.1919L13.3367 12.087L16.5344 5.82104Z" stroke="black" stroke-width="2"/>
</svg>

When placed on a white background, it looks like this with black stroke, as shown in the image below:

https://i.sstatic.net/T4mlY.png

If I add the same star icon to a button component, I want it to have a white stroke instead of black. I tried using

 svg { fill: currentColor) // then it's invisible on white background, because of its whiteness.

like below, How can I achieve a white star without a black stroke?

https://i.sstatic.net/U522V.png

Instead of black stroke on the star, I want it to be displayed as shown here: https://i.sstatic.net/ICrRt.png

After trying the suggestion of using two props: scgStroke and svgFill, now I get a black-filled star on a white background and a different display on a button as shown below: https://i.sstatic.net/edlED.png https://i.sstatic.net/xVsQc.png

I would like the outside stroke to be visible rather than a white fill (fill = "white"), something similar to the image below: https://i.sstatic.net/idBtv.png

javascripthtmlcssvue.jssvg

Answer №1

One way to enhance your design is by creating components and passing props with colors:

Vue.component('icon', {
  template: `
  <svg width="33" height="33" viewBox="0 0 33 33"  xmlns="http://www.w3.org/2000/svg" >
    <path fill="none" d="M16.4206 26.7218H5.75391V12.722L16.4206 4.39893L27.0872 12.722V26.7218H16.4206ZM16.4206 26.7218V18.7218" :stroke="svgStroke" :stroke-width="strokeWidth"/>
  </svg>`,
  props: {
    svgStroke: {default: 'black'},
    strokeWidth: {default: 2}
  }
})

new Vue({
  el: '#demo',
})
.btn {
  background-color: #2f76fd;
  color: white;
  display: flex;
  align-items: center;
  border: none;
  padding: .5em 1em;
}
.btn-text {
  margin-right: .5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <icon></icon>
  <button class="btn">
    <span class="btn-text">Primary</span>
    <icon svg-stroke="white" stroke-width="2"></icon>
  </button>
</div>

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

Tips for verifying if the input in a Material UI textfield is an <iframe> tag

In my ReactJS code, I am utilizing the TextField component from material-ui. I need to verify if the user input is an iframe. How can I achieve this? Currently, I am attempting to use window.parent.frames.length > 0; to determine if the page contains a ...

javascripthtmlreactjsiframematerial-ui

iPhone 6 (iOS) users may face compatibility issues with iframe and fancy box features

I am currently learning how to use jQuery and the fancybox library. In my Angular 1 and Ionic project, I have successfully implemented fancybox with an iframe. Everything works perfectly on browsers and Android devices, but on iOS, a loader icon appears an ...

javascriptjqueryangularjsfancybox

Achieve the elimination of null values from text fields and text areas with the help of

One of the columns in my database table has null values. When I try to save the value using formData: formData.append('remark', this.form.remark); I encounter an issue where the textfield displays null when retrieving the data. <textarea v-m ...

vue.jsvuejs2

Creating an Unordered List in GWT that Includes List Items

I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this: <div class="topbar"> <div class="container fixed"> <h3> <a href="" class="logo">test& ...

htmlcssgwttwitter-bootstrap

Interacting with objects in a loaded OBJ model using ThreeJS

I have an obj model representing a map with tree objects. After successfully loading the model, I am trying to access one specific tree object named Tree1. How can I achieve this? Currently, my code looks like this: loader.load( 'map.obj', fun ...

javascriptthree.js

Utilizing Backbone script for fetching data from an external JSON source

I am seeking assistance on how to utilize a Backbone script to display data from a JSON file. Here is the structure of the HTML Page: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</tit ...

javascriptjqueryjsonbackbone.js

Achieving Navbar overlap on Carousel with Bootstrap

Is there a way to make the bootstrap navbar overlap with the carousel without causing any issues with #test? HTML <nav class="navbar navbar-expand-lg navbar-dark bg-dark floating-navbar"> <div class="container"> & ...

htmlcssbootstrap-5

Removing Access Package Assignment in Microsoft Graph

Using the Microsoft Graph API Beta version, I am attempting to delete an access package. However, in order to do so, I must first remove all assignments associated with it. As per the official documentation, I came across the accessPackageAssignment object ...

javascriptpythonazureazure-active-directorymicrosoft-graph-api

Struggling to run two separate single page applications concurrently on a single server with nginx

UPDATE: I have made revisions to this post in order to provide a clearer explanation of the issue. The initial post has been replaced with this updated version. We are dealing with two single-page applications that must be accessible from the same domain ...

nginxvue.jsubuntu-16.04single-page-application

Setting the Node environment as an environment variable within the application: a step-by-step guide

Struggling with setting process.env.NODE_ENV to TEST in my code. Check out the relevant snippets below: test.js import server from "../../src/index.js"; process.env.NODE_ENV = "test"; console.log(process.env.NODE_ENV); // outputs &qu ...

javascriptnode.jstestingenvironment-variables

When utilizing the 'checkAll' method in a Bootstrap table, it will only select the checkboxes displayed on the current page

I currently have a Bootstrap table on my HTML5 page. When I use the code $('#bk-table').bootstrapTable('checkAll'), only the checkboxes on the current page are checked. Is there a way to check all the checkboxes on all pages? Here i ...

javascripthtmlbootstrap-table

PHP: I am unable to establish a connection with the script or submit form data to mySQL

Seeking assistance with debugging this script. (The * represents confidential information that I am aware of but cannot share) <?php $dbhost = '*********'; $dbuser = '*********'; $dbpass = '*********'; $conn = mysql_conne ...

phpmysqlformshtml

Unable to retrieve scope data in controller function

Having trouble accessing the scope attribute fullName from the controller method login. What could be causing this issue? App.controller('LoginController', ['$scope', 'LoginService', '$location', function(scope, Log ...

javascriptangularjsangularjs-scope

What is the best way to incorporate CSS into an Angular 4 project?

I'm struggling to figure out how to import CSS into my app component. All the information I find on Google seems to lead me in different directions... Within my component, I have defined: @Component({ styleUrls: ['../css/bootstrap.min.css&ap ...

cssangularbootstrap-4

Is it possible to update the page URL and content seamlessly without having to reload the entire page?

I am looking for a solution where I can click on a link (like test.com/page?=test) and have the tab in my browser open the link without reloading or refreshing the page, while also updating the content to match the linked page. How can I achieve this? I ...

javascriptphpajaxurl

Unit testing Vue 3 by simulating the push() method of vue-router

As a newcomer to Vue and StackOverflow, I wanted to share my issue. While attempting to run the unit test for my application, I encountered a TypeError. The error message stated: "TypeError: Cannot read properties of undefined (reading 'push')" ...

javascriptvue.jsunit-testingvue-routervuejs3

Creating a handshake process for hybi-17

I am currently in the process of creating the handshake for the websocket hybi-17 protocol. I have been referencing the draft available at . Based on the guidelines provided in the draft, I have developed the following code snippets for both the client (us ...

phphtmlwebsocket

Achieving consistent image column heights that decrease evenly

I am trying to create a grid-like layout where each column in a row has the same height and contains an image while maintaining its proportions. Currently, I am using the flex-grow property to adjust the ratio of the images. Although this works, it often ...

htmlcssflexbox

What is the best way to set a CSS background using vue-cli 3?

What is the process for setting a CSS background in vue-cli 3? I have set my vue.config.js like this. Is publicPath properly configured? JavaScript const path = require("path"); module.exports = { devServer: { port: 8081, overlay: { warni ...

javascriptvue.jswebpackfrontendvue-cli

Dealing with the Firebase Storage XMLHttpRequest undefined issue in Nuxt JS

I require assistance with my web app, which involves uploading an image to firebase storage and then displaying that image in a thumbnail. The error message I am encountering states that this.xhr_ = new XMLHTTPREQUEST is not defined Unfortunately, I do n ...

firebasevue.jsfirebase-storagenuxt.js