svg,
vector,
ifsvg {
    position:relative;
    width: 20px;
    height:  20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

svg,
vector,
ifsvg::before {
    content: "";
    background-color: black;
    mask-repeat: no-repeat;
    mask-size: 65% auto;
    mask-position: center center;
    
    position:absolute;
    
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 65% auto;
    -webkit-mask-position: center center; 
    
    height: 100%;
    width: 100%;
}


 
/*color*/

/* Color Classes */
ifsvg.red::before { background-color: red; }
ifsvg.blue::before { background-color: blue; }
ifsvg.green::before { background-color: green; }
ifsvg.yellow::before { background-color: yellow; }
ifsvg.orange::before { background-color: orange; }
ifsvg.purple::before { background-color: purple; }
ifsvg.pink::before { background-color: pink; }
ifsvg.brown::before { background-color: brown; }
ifsvg.gray::before { background-color: gray; }
ifsvg.black::before { background-color: black; }
ifsvg.white::before { background-color: white; }
ifsvg.lightblue::before { background-color: lightblue; }
ifsvg.lightgreen::before { background-color: lightgreen; }
ifsvg.darkblue::before { background-color: darkblue; }
ifsvg.darkgreen::before { background-color: darkgreen; }
ifsvg.gold::before { background-color: gold; }
ifsvg.silver::before { background-color: silver; }
ifsvg.cyan::before { background-color: cyan; }
ifsvg.magenta::before { background-color: magenta; }
ifsvg.teal::before { background-color: teal; }
ifsvg.olive::before { background-color: olive; }
ifsvg.success::before { background-color: #28a745; }
ifsvg.danger::before { background-color: #dc3545; }
ifsvg.warning::before { background-color: #ffc107; }
ifsvg.info::before { background-color: #17a2b8; }
ifsvg.light::before { background-color: #f8f9fa; }
ifsvg.dark::before { background-color: #343a40; }
ifsvg.primary::before { background-color: #007bff; }
ifsvg.secondary::before { background-color: #6c757d; }
ifsvg.muted::before { background-color: #6c757d; }

ifsvg.if-color-by::before {
    background-color:var(--if-color);
}


/*vectors*/
ifsvg.expand::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z"/></svg>');
}

ifsvg.heart::before {
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M1.24264 8.24264L8 15L14.7574 8.24264C15.553 7.44699 16 6.36786 16 5.24264V5.05234C16 2.8143 14.1857 1 11.9477 1C10.7166 1 9.55233 1.55959 8.78331 2.52086L8 3.5L7.21669 2.52086C6.44767 1.55959 5.28338 1 4.05234 1C1.8143 1 0 2.8143 0 5.05234V5.24264C0 6.36786 0.44699 7.44699 1.24264 8.24264Z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M1.24264 8.24264L8 15L14.7574 8.24264C15.553 7.44699 16 6.36786 16 5.24264V5.05234C16 2.8143 14.1857 1 11.9477 1C10.7166 1 9.55233 1.55959 8.78331 2.52086L8 3.5L7.21669 2.52086C6.44767 1.55959 5.28338 1 4.05234 1C1.8143 1 0 2.8143 0 5.05234V5.24264C0 6.36786 0.44699 7.44699 1.24264 8.24264Z"/></svg>');
}



/** example
ifsvg. ::before {
    mask-image: url('data:image/svg+xml;utf8, ');
    -webkit-mask-image: url('data:image/svg+xml;utf8, ');
}
**/







/*size*/
/* Width Classes */
ifsvg.w23 { width: 23px; }
ifsvg.w24 { width: 24px; }
ifsvg.w25 { width: 25px; }
ifsvg.w26 { width: 26px; }
ifsvg.w27 { width: 27px; }
ifsvg.w28 { width: 28px; }
ifsvg.w29 { width: 29px; }
ifsvg.w30 { width: 30px; }
ifsvg.w31 { width: 31px; }
ifsvg.w32 { width: 32px; }
ifsvg.w33 { width: 33px; }
ifsvg.w34 { width: 34px; }
ifsvg.w35 { width: 35px; }
ifsvg.w36 { width: 36px; }
ifsvg.w37 { width: 37px; }
ifsvg.w38 { width: 38px; }
ifsvg.w39 { width: 39px; }
ifsvg.w40 { width: 40px; }
ifsvg.w41 { width: 41px; }
ifsvg.w42 { width: 42px; }
ifsvg.w43 { width: 43px; }
ifsvg.w44 { width: 44px; }
ifsvg.w45 { width: 45px; }
ifsvg.w46 { width: 46px; }
ifsvg.w47 { width: 47px; }
ifsvg.w48 { width: 48px; }
ifsvg.w49 { width: 49px; }

/* Height Classes */
ifsvg.h23 { height: 23px; }
ifsvg.h24 { height: 24px; }
ifsvg.h25 { height: 25px; }
ifsvg.h26 { height: 26px; }
ifsvg.h27 { height: 27px; }
ifsvg.h28 { height: 28px; }
ifsvg.h29 { height: 29px; }
ifsvg.h30 { height: 30px; }
ifsvg.h31 { height: 31px; }
ifsvg.h32 { height: 32px; }
ifsvg.h33 { height: 33px; }
ifsvg.h34 { height: 34px; }
ifsvg.h35 { height: 35px; }
ifsvg.h36 { height: 36px; }
ifsvg.h37 { height: 37px; }
ifsvg.h38 { height: 38px; }
ifsvg.h39 { height: 39px; }
ifsvg.h40 { height: 40px; }
ifsvg.h41 { height: 41px; }
ifsvg.h42 { height: 42px; }
ifsvg.h43 { height: 43px; }
ifsvg.h44 { height: 44px; }
ifsvg.h45 { height: 45px; }
ifsvg.h46 { height: 46px; }
ifsvg.h47 { height: 47px; }
ifsvg.h48 { height: 48px; }
ifsvg.h49 { height: 49px; }

/* Width and Height Classes */
ifsvg.x23 {
    width: 23px;
    height: 23px;
}
ifsvg.x24 {
    width: 24px;
    height: 24px;
}
ifsvg.x25 {
    width: 25px;
    height: 25px;
}
ifsvg.x26 {
    width: 26px;
    height: 26px;
}
ifsvg.x27 {
    width: 27px;
    height: 27px;
}
ifsvg.x28 {
    width: 28px;
    height: 28px;
}
ifsvg.x29 {
    width: 29px;
    height: 29px;
}
ifsvg.x30 {
    width: 30px;
    height: 30px;
}
ifsvg.x31 {
    width: 31px;
    height: 31px;
}
ifsvg.x32 {
    width: 32px;
    height: 32px;
}
ifsvg.x33 {
    width: 33px;
    height: 33px;
}
ifsvg.x34 {
    width: 34px;
    height: 34px;
}
ifsvg.x35 {
    width: 35px;
    height: 35px;
}
ifsvg.x36 {
    width: 36px;
    height: 36px;
}
ifsvg.x37 {
    width: 37px;
    height: 37px;
}
ifsvg.x38 {
    width: 38px;
    height: 38px;
}
ifsvg.x39 {
    width: 39px;
    height: 39px;
}
ifsvg.x40 {
    width: 40px;
    height: 40px;
}
ifsvg.x41 {
    width: 41px;
    height: 41px;
}
ifsvg.x42 {
    width: 42px;
    height: 42px;
}
ifsvg.x43 {
    width: 43px;
    height: 43px;
}
ifsvg.x44 {
    width: 44px;
    height: 44px;
}
ifsvg.x45 {
    width: 45px;
    height: 45px;
}
ifsvg.x46 {
    width: 46px;
    height: 46px;
}
ifsvg.x47 {
    width: 47px;
    height: 47px;
}
ifsvg.x48 {
    width: 48px;
    height: 48px;
}
ifsvg.x49 {
    width: 49px;
    height: 49px;
}