Reputation: 378

All SVGs to be the same size

I want to have a shapes.svg where all my icons live, at the moment it looks like this:

<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="canvas">
       <path d="M14.031 2.34l-3.464-2-8.982 15.557.147 3.745 3.317-1.745L14.031 2.34z" fill="#F1F1F1"/>
    </symbol>
    <symbol id="function">
        <path d="M16.3 13l-5 6M11.8 13l4 6" stroke="#F1F1F1" stroke-width="2"/><path d="M13 2C8.2.5 8 6.359 7 10.282S5 19 1 17" stroke="#F1F1F1" stroke-width="3"/><path d="M3.3 10h7.5" stroke="#F1F1F1" stroke-width="2"/>
    </symbol>
    <symbol id="settings">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.188 0h2.222v2.525a7.505 7.505 0 011.534.395L14.217.715l2.165 1.25-1.274 2.207c.371.307.713.648 1.02 1.02l2.206-1.274 1.25 2.165-2.205 1.273c.183.489.316 1.002.394 1.533H20.3v2.222h-2.526a7.505 7.505 0 01-.395 1.534l2.206 1.273-1.25 2.165-2.207-1.274a7.603 7.603 0 01-1.02 1.02l1.274 2.206-2.165 1.25-1.273-2.205a7.503 7.503 0 01-1.533.394V20H9.188v-2.526a7.503 7.503 0 01-1.533-.394l-1.273 2.206-2.165-1.25 1.274-2.207a7.604 7.604 0 01-1.02-1.02l-2.207 1.274-1.25-2.165 2.205-1.273a7.502 7.502 0 01-.395-1.534H.3V8.89h2.525a7.504 7.504 0 01.395-1.533L1.014 6.083l1.25-2.165L4.47 5.192a7.601 7.601 0 011.02-1.02L4.216 1.964 6.38.714 7.654 2.92a7.504 7.504 0 011.534-.395V0zm1.11 6.444a3.556 3.556 0 100 7.111 3.556 3.556 0 000-7.11z" fill="#F1F1F1"/>
    </symbol>
    <symbol id="triangle">
        <line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,255,255);stroke-width:2" />
        <line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,255,255);stroke-width:2" />
        <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,255,255);stroke-width:2" />
    </symbol>
</svg>

And I have a component Icon that looks like this:

function Icon({ name, flip, rotate, className }: IconProps) {
    var useTag = `<use xlink:href="${shapes}#${name}" />`;
    let inlineStyles = {};
    if (rotate) {
        inlineStyles["transform"] = `rotate(${rotate}deg)`;
    } else if (flip) {
        inlineStyles["transform"] = "rotateY(180deg)";
    }
    return (
        <svg
            viewBox="0 0 100 100"
            preserveAspectRatio="xMidYMid meet"
            style={inlineStyles}
            className={classnames(styles.icon, `icon-${name}`, className)}
            dangerouslySetInnerHTML={{ __html: useTag }}
        />
    );
}

and I have this css

.icon {
    width: 1em;
    height: 1em;
    display: inline-flex;
}

I just want all my icons to be 1em, But the first three canvas, function and settings are tiny tiny tiny but triangle does what I want it to do.

See here.

I have exported the first 3 myself from Figma, and the 4th is just a test one.

How can I have a .svg file with all my SVGs and a component that always give me the svg in 1em x 1em?

Thank you :)

Upvotes: 0

All SVGs to be the same size

Answers (1)

Related Questions