I wanted to display an svg icon and a text in a same line in React and Next.js. Now I have found how to do it. Though I still don't know how to control the size of the svg icon in the context. I want the svg icon to be same size as each character of the text.
I put the browser display here.
And I put my code bellow, please point out what is wrong about my code.
//mysvg.js
import styles from '../styles/svg.module.css'
export function CircleBottomIcon(props) {
return (<span class={styles['svg-image']}>
<svg
width="30"
height="30"
viewBox="0 0 30 30"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>circle-bottom</title>
<path
d="M27.5 15c0 6.893-5.608 12.5-12.5 12.5-6.893 0-12.5-5.608-12.5-12.5C2.5 8.107 8.108 2.5 15 2.5c6.893 0 12.5 5.608 12.5 12.5zm2.5 0c0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15zm-15 2.5l-5.625-5.625-1.875 1.91L15 21.25l7.5-7.466-1.875-1.91L15 17.5z"
fill-rule="evenodd"
/>
</svg></span>
);
}
//index.js
import {CircleBottomIcon} from '../components/mysvg'
export default function Home() {
return (
<span>
1234<CircleBottomIcon></CircleBottomIcon>567890
</span>
)
}
//svg.module.css
.svg-image {
display: inline-block;
width: 16px;
height: 16px;
}
I'd suggest you keep constant values for viewbox param and accept props for height and width. Add a default values for these as 30 and 30. Part of code looks like:
const { height, width } = props;
<svg
width={width}
height={height}
viewBox="0 0 30 30"
...
Then you can use any values for width and height when you use the svg component.
your .svg-image selector should target the svg element:
.svg-image {
display: inline-block;
svg {
width: 16px;
height: 16px;
}
}
I want to create an application for dispaly poem and I want to use Eslimi arts for frame or template to display these peoms .an example of Eslimi are in this page and here .But I have a problem with multiple screen size on mobile and desktops,For example I deployed my app on some are good but on and some are small because I use jpg file of these arts,So the jpg file could not adjust himself for be taller or wider.So I decided to pars these svg files to multiple parts and make them display progammatically aroud the poems.Untile
In Shapes Example there is a Tiger.qml file like below
import QtQuick 2.12
import QtQuick.Shapes 1.12
Shape {
asynchronous: true
width: 494; height: 510
ShapePath {
fillColor: "#ffffff"
strokeColor: "#000000"
strokeWidth: 0.172
PathMove { x: -122.304; y: 84.285 }
PathCubic { control1X: -122.304; control1Y: 84.285; control2X: -122.203; control2Y: 86.179; x: -123.027; y: 86.16 }
PathCubic { control1X: -123.851; control1Y: 86.141; control2X: -140.305; control2Y: 38.066; x: -160.833; y: 40.309 }
PathCubic { control1X: -160.833; control1Y: 40.309; control2X: -143.05; control2Y: 32.956; x: -122.304; y: 84.285 }
}
}
Now I have a svg file like this,
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#282F68;}
.st1{fill:#FFFFFF;}
.st2{fill:#91D0D5;}
</style>
<g>
<g>
<path class="st0" d="M474.1,130.5c-56.1,11.6-103.7-45.8-157,21.2C348.5,72.1,274.8,59.4,256.7,5c-0.2,0.6-0.5,1.2-0.7,1.8
c-0.2-0.6-0.5-1.1-0.7-1.8c-18.1,54.4-91.7,67-60.3,146.7c-53.4-67-101-9.7-157-21.2c38,42.8,12,113.1,96.7,125.7
C50,268.9,76,338.7,37.9,381.5c56.1-11.5,103.7,46.2,157-20.8c-31.4,79.7,42.2,92,60.3,146.3c0.2-0.6,0.5-1.2,0.7-1.8
c0.2,0.6,0.5,1.1,0.7,1.8c18.1-54.4,91.7-66.6,60.3-146.3c53.3,67,101,9.3,157,20.8c-38-42.8-12-112.6-96.7-125.2
C462,243.6,436,173.3,474.1,130.5z"/>
<g>
<path class="st1" d="M255.3,162.2c0.3-0.1,0.4-0.3,0.7-0.4c0.3,0.1,0.4,0.3,0.7,0.4c42.5-19,34.2-57.3,0-92.6
c-0.3,0.3-0.5,0.6-0.7,0.9c-0.3-0.3-0.5-0.6-0.7-0.9C221.1,104.9,212.8,143.2,255.3,162.2z"/>
<path class="st1" d="M93.6,162.9c13.5,47.2,42.5,73.5,80.2,46.3C178.6,162.9,141.2,150.9,93.6,162.9z"/>
<path class="st1" d="M93.6,349.5c47.6,12,85,0,80.2-46.3C136.1,276,107.1,302.3,93.6,349.5z"/>
<path class="st1" d="M338.2,303.3c-4.8,46.2,32.6,58.2,80.2,46.3C404.9,302.3,375.9,276,338.2,303.3z"/>
<path class="st1" d="M256.8,350.2c-0.3,0.1-0.5,0.3-0.8,0.5c-0.3-0.2-0.5-0.3-0.8-0.5c-42.5,19-34.2,57.4,0,92.6
c0.3-0.3,0.5-0.6,0.8-0.9c0.3,0.3,0.5,0.6,0.8,0.9C291,407.6,299.3,369.2,256.8,350.2z"/>
<path class="st1" d="M338.2,209.1c37.7,27.3,66.7,1,80.2-46.3C370.8,150.9,333.4,162.9,338.2,209.1z"/>
</g>
</g>
<g>
<g>
<path class="st2" d="M310.3,284.4c17,28.4-33.1,57.4-49.2,28.4c-0.2,0.3-0.5,0.5-0.7,0.8c-0.2-0.3-0.5-0.4-0.7-0.8
c-16.1,29-66.2-0.1-49.2-28.4c-33.1,0.5-33.1-57.3,0-56.8c-16.9-28.4,33.1-57.3,49.2-28.3c0.2-0.3,0.5-0.5,0.7-0.8
c0.2,0.3,0.5,0.5,0.7,0.8c16.2-29,66.2-0.1,49.2,28.3C343.4,227,343.4,284.9,310.3,284.4z"/>
</g>
<path class="st1" d="M287.4,256c0-18-13.5-27.1-27-27.1c-13.5,0.1-27,9.1-27,27.1c0,18,13.5,27.1,27,27.1
C273.9,283.1,287.4,274,287.4,256z"/>
</g>
</g>
</svg>
This svg file is a simplified of complex svg file .So I don't know how do the works.Shold I convert svg to qml shapes? shoudl I convert svg to qquickitem? or what? Does any one know How Should I work this?
I have a component.html that transcludes my svg component:
<masterflex-sidebar>
<masterflex-logo sidebar-logo color="white">
</masterflex-logo>
</masterflex-sidebar>
My logo.ts file:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'masterflex-logo',
templateUrl: './masterflex.component.html',
styleUrls: ['./masterflex.component.scss']
})
export class MasterflexComponent implements OnInit {
#Input() color:string
constructor() { }
ngOnInit() {
}
}
My svg component(part of it):
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 237.4 35.9"
height="35.9"
width="237.4"
xml:space="preserve" *ngIf="color">
I want to be able to change the color of my svg component to whatever color I want (set in my first component with color="white") and have that color apply to my svg. Is there a way to pass that color attribute into a scss style?
An SVG element has a stroke and a fill color. You can set each one with the corresponding element or style attribute:
<svg [attr.stroke]="color" ... >
<svg [style.stroke]="color" ... >
<svg [attr.fill]="color" ... >
<svg [style.fill]="color" ... >
The color input property of the component must be set in the parent component:
<my-svg-component [color]="myCustomColor" ...>
You can try the code in this stackblitz. Please note that if shape and text elements inside of the SVG element set their own stroke or fill colors, these will override the color set at the SVG element level.
Try doing this,
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 237.4 35.9"
height="35.9"
width="237.4"
xml:space="preserve"
style="color: {{color}}" *ngIf="color">
Or apply it similarly to each style rule you have within your <svg></svg> tags. Not sure if it is fill instead of color you are after since it is an svg. See if it worked or not.