프로그램/html

angular 10 svg component

milktea.kang 2021. 5. 14. 14:12
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 451.44 139.72"
    preserveAspectRatio="xMidYMid meet"
    [attr.width]="imgWidth"
    [attr.height]="imgHeight">
    <g transform="translate(126.69 -35.219)" [ngClass]="[bgColor,borderColor]">
        <g transform="matrix(.035278 0 0 -.035278 -126.71 217.87)">
         <path d="m1080 5170c-364-9-401-13-462-52-131-83-259-271-262-383-1-53 1-59 33-85l33-28-15-44c-24-67-126-297-205-463l-72-151v-791l-30-38c-36-45-45-87-37-171 7-70 16-93 58-142 28-31 29-37 29-135 1-133 16-352 26-368 11-18 22 16 23 71 2 73 12 79 62 32 90-82 113-92 205-92h84v-70c0-57-4-74-20-90-32-32-54-24-133 46-80 71-159 71-173-1-10-55 13-103 69-143 46-33 50-34 88-23 22 7 49 21 60 32 24 24 61 39 99 39 33 0 182-98 207-137 11-16 18-54 21-109l4-83 459-3c307-2 462-7 469-14 6-6 11-34 13-64l2-54-35-7c-19-4-244-12-500-18-651-16-954-35-986-62-20-17-17-52 7-82 20-26 54-44 303-161 65-31 130-68 143-83l25-26 321 7c177 4 401 12 497 17s517 14 935 19 855 14 970 19c116 6 476 15 800 21 325 5 617 12 650 15 73 7 655 31 1085 45 1060 36 1261 46 1450 75 132 20 320 33 630 45 146 6 369 15 495 20 127 6 385 17 575 25 755 33 1278 61 1395 75 141 17 902 53 1670 80 487 17 623 32 649 73 27 43-120 118-350 177-63 16-124 36-137 44-35 22-240 29-550 17-327-13-499-27-544-46-18-8-34-11-37-7-2 4 12 54 32 112 35 100 36 112 37 235 0 149-14 213-76 340-91 188-248 315-460 370-85 23-234 23-319 1-239-64-438-267-500-512-23-88-27-232-9-316 26-120 94-244 194-356 26-29 45-55 43-57-13-13-105 69-127 112-30 60-110 162-153 195l-33 26v183c0 158 3 192 19 237 16 41 17 55 8 64-20 20-143 27-352 22-107-3-481-11-830-20-349-8-808-19-1020-24-936-24-1608-40-2035-50-1103-25-1698-40-1802-46-98-6-113-9-113-24 0-9 16-79 35-156 43-171 43-174 6-174-17 0-33-5-36-11-4-5-4-66 0-135 7-110 9-124 24-118 60 25 274 38 1006 59 821 24 1834 54 2520 75 182 6 467 15 635 21 541 18 1014 26 1047 17 39-11 67-46 52-64-18-22-152-38-439-54-319-18-801-35-2750-100-333-11-846-30-1140-41-294-12-641-22-770-23l-235-1 3 30c3 30 2 30-22-10-13-22-47-60-75-83-28-24-58-56-65-71-14-27-96-89-96-73 0 4 23 35 51 67 72 85 132 191 170 303 31 91 33 105 34 237v140l-51 121c-28 66-67 146-88 177-85 127-233 229-411 283-78 23-109 27-225 27-147 1-256-20-350-68-120-61-372-309-343-338 3-4-2-9-11-13-9-3-16-12-16-19 0-21-47-24-500-32-505-10-778-8-889 6-83 11-100 16-89 26 12 12 191 25 433 31 138 4 260 11 273 15 24 9 31 52 11 65-6 3-148 9-314 13-282 6-329 10-312 28 4 3 122 10 263 14 262 8 384 20 442 44 36 16 41 30 15 43-10 5-164 12-343 15-302 6-399 14-374 30 24 15 197 27 454 33 151 3 292 10 312 15 42 11 65 40 45 57-8 7-158 12-409 14-218 2-400 6-404 11-4 4-4 10 0 15 4 4 200 10 434 13 235 3 435 9 445 14 26 11 52 64 37 79-8 8-144 12-460 16-333 4-452 8-461 17-26 26 51 34 481 49 512 17 574 25 599 80 6 14 11 28 11 31 0 4-289 3-642 0l-641-7-171 84c-94 46-180 92-191 101-19 16-19 16 11 11 16-2 87-30 157-61s135-55 144-53c15 3 18 13 16 53-7 211-7 225 12 225 11 0 15-11 15-40 0-60 22-69 187-82 135-10 368-7 2118 22 314 5 1e3 14 1525 20s1225 15 1555 20 1070 14 1645 20 1299 15 1610 20 1022 15 1580 21 1209 14 1445 18c346 6 433 5 445-6 24-22-3-37-83-45-39-3-292-7-562-7-269-1-911-6-1425-11-3921-42-4878-53-6030-70-371-5-1233-14-1915-20-1285-11-1970-24-2017-37-50-14-30-28 54-36 86-8 692-4 1733 13 336 5 1053 14 1595 20s1316 15 1720 20c1621 21 4620 54 6015 66 715 6 884 4 911-14 8-5 12-126 15-372l4-365-40-6c-22-4-204-12-405-18-708-22-955-31-979-38-26-7-26-3 3-163 9-47 19-138 23-203 4-82 11-123 20-133 18-18 49-18 733 1 586 17 645 21 645 46 0 9 6 24 14 33 39 46 35 1909-4 2126-43 235-136 406-291 534-101 83-182 122-284 135-230 29-1022 46-3860 86-586 9-1290 20-1565 25s-941 14-1480 20c-927 10-1479 20-2155 40-343 10-1541 10-1970 0zm1977-50c346-6 840-14 1098-20 532-11 1369-23 3080-45 649-8 1484-20 1855-25s1028-14 1460-20c1102-14 1577-27 1604-44 11-8 38-19 59-26 48-15 176-111 243-181 138-147 193-335 219-761l5-88h-207c-115 0-541-4-948-10-407-5-1426-14-2265-20s-1952-15-2475-20c-1296-13-2827-28-4250-40-655-6-1385-15-1623-21l-432-11-83 26c-101 31-147 59-147 86 0 22 123 268 205 409 26 46 65 101 85 122 31 33 43 39 78 39 47 0 92 15 92 30 0 5-13 10-28 10-16 0-37 6-48 14-66 50 132 114 421 137 167 13 1725 8 2795-10 1461-25 3723-47 6155-62 1745-10 2531-6 2455 13-19 5-582 13-1250 18s-1678 13-2245 19c-566 6-1559 15-2205 21-1126 10-1713 17-3560 41-459 6-1127 11-1485 12-684 1-764-3-955-46-137-30-260-29-325 3-42 21-50 30-53 56-4 38 19 64 57 64 30 0 68 36 120 112 17 25 47 60 68 77 30 25 34 32 24 45-7 8-22 18-32 21-17 6-11 12 36 40 30 19 68 36 83 38 57 9 1720 7 2319-3zm-2522-173c-19-41-82-117-96-117s28 73 70 122c39 46 49 44 26-5zm-7-363c12-8 22-23 22-32 0-10-40-84-90-165-49-81-126-216-171-300-79-149-103-186-114-175-9 9 37 123 98 243 31 61 83 174 116 253 83 200 91 210 139 176zm23-886c16-29 2-145-15-127-2 2-8 37-11 77-8 75 2 94 26 50zm-359-623c14-52-12-156-46-184-13-11-17-9-27 15-14 37-3 151 17 182 20 30 46 24 56-13zm398-61c0-13-5-24-10-24-13 0-32 48-24 61 10 16 34-11 34-37zm-3-161c-3-10-5-2-5 17s2 27 5 18c2-10 2-26 0-35zm10110-251c57-30 108-84 140-150 21-44 28-74 31-141 5-115-20-184-92-257-193-193-522-88-564 179-28 175 68 327 241 383 63 21 191 13 244-14zm-7756-106c227-48 353-223 320-442-23-158-98-249-248-304-53-19-77-22-155-18-79 4-102 9-153 35-74 38-147 115-183 191-24 51-27 69-27 162 1 128 23 194 92 270 52 58 105 89 183 106 73 16 93 16 171 0zm-2603-298c4-42-26-85-51-75-23 9-21 45 3 85 25 41 44 37 48-10zm1772 2c0-16-4-30-10-30-5 0-10 14-10 30 0 17 5 30 10 30 6 0 10-13 10-30zm4-182c9-82 33-172 57-220 23-45 9-51-21-9-42 60-74 196-63 266 8 50 19 35 27-37zm296-513c19-19 30-35 24-35-5 0-22 16-37 35-36 45-30 45 13 0z"/>
         <path d="m7705 4970-210-5 250-7c138-5 441-8 675-8s857-7 1385-15c1084-16 2278-19 2255-5-38 22-3741 56-4355 40z"/>
         <path d="m8600 4881-515-6 410-8c640-11 2270-28 3015-30 563-2 679 0 700 12l24 14-24 10c-29 11-2790 17-3610 8z"/>
         <path d="m756 4512c-3-5-26-62-51-128-25-65-73-176-107-246-33-70-62-145-65-166l-5-39 63-6c70-7 386 7 396 17 17 16-23 21-203 26-119 3-194 9-194 15-1 15 78 23 228 24 139 1 182 12 197 48 12 33 17 236 7 337-7 77-14 102-28 113-20 15-229 19-238 5zm231-200c-3-92-9-175-13-185-9-24-46-21-80 5-74 56-184 152-184 160 0 5 15 42 34 83 42 92 63 104 170 105h79zm-272-153c21-19 35-40 35-55 0-31-39-56-82-52-26 2-34 8-36 26-5 31 28 112 44 112 2 0 19-14 39-31z"/>
         <path d="m1172 4265 3-247 60-50-40 7c-22 4-48 13-57 22-18 16-49 15-55-3-2-6 5-22 16-35l19-24 333-3c330-4 447 2 403 18-11 5-91 10-176 12-152 3-182 9-115 23 46 10 185 77 234 114 24 17 54 49 69 71 24 35 26 48 25 129-2 107-16 157-54 185-27 20-42 21-348 24l-320 3zm48 51c-7-7-10 13-10 65 0 98 14 112 18 18 2-41-2-77-8-83zm564 147 68-6-4-114c-3-115-3-115-35-143-66-59-165-59-225 0-34 34-37 74-9 128 10 20 22 57 26 82s9 48 12 53c5 9 75 9 167 0z"/>
         <path d="m2103 4500c-49-16-57-54-58-272 0-102 3-190 7-194s146-12 315-17c402-13 977 3 1002 28 32 31 17 373-18 416-13 16-35 23-91 30-111 13-1118 21-1157 9zm567-50c91-5 182-14 203-20 31-9 37-15 37-39 0-35-93-169-123-176-12-3-177-4-367-3l-345 3v106c0 122 7 136 68 142 54 5 316-2 527-13zm634-9c28-31 45-91 46-158v-63h-56c-92 0-97 6-89 108 4 48 13 97 21 110 18 27 55 29 78 3z"/>
         <path d="m8995 4496c-131-26-210-62-268-123-35-38-49-116-37-205 15-103-5-98 394-97 187 1 415 5 506 8l165 6v112c0 98-3 115-21 140-50 68-145 118-284 150-91 21-365 26-455 9zm42-197c29-25-6-189-41-189-42 0-91 135-67 186 11 24 16 26 52 21 22-3 47-11 56-18z"/>
         <path d="m3744 4480c-154-6-166-11-184-64-26-80-32-286-9-347 10-26 11-26 152-32 78-4 357-7 619-7h478l-6 93c-13 220-25 341-35 347-29 18-687 25-1015 10zm320-57c-23-108-34-133-62-139-15-4-33-14-40-23-11-13-42-16-198-20l-186-3 3 80c4 88 20 118 68 125 14 2 115 5 224 6l197 1zm300 12c3-8 1-27-5-42-8-22-12-24-19-13-15 23-12 70 4 70 8 0 16-7 20-15zm375-11c29-37 27-62-6-75-65-24-123 24-89 76 23 34 67 34 95-1z"/>
         <path d="m7518 4453c-14-42-18-283-5-345l8-36 77-8c91-8 881 4 932 14l35 8 3 74c3 83-13 228-30 265-6 13-22 28-37 33-21 8-724 33-918 32-50 0-52-1-65-37zm181-29c10-3 6-13-17-37-23-23-35-49-43-90-12-59-38-93-64-83-24 9-35 51-35 131 0 60 3 76 18 84 15 9 106 6 141-5zm402-4c14-8 19-21 19-50 0-36-2-40-26-40-35 0-181 38-217 57-30 15-27 27 8 36 39 9 197 7 216-3zm397-17c53-33-6-72-92-59-52 8-96 39-96 68 0 19 4 20 83 13 45-4 92-13 105-22z"/>
         <path d="m4954 4459c-11-19-7-375 5-397 10-18 26-21 168-27 160-8 772 0 896 12 55 5 70 10 80 27 14 24 17 369 4 383-14 14-1144 16-1153 2zm611-101c-10-102-20-110-45-35-6 21-23 45-36 54-24 15-27 15-54-6-48-35-140-19-140 25 0 25 40 33 164 33l118 1zm515 8c0-35 3-78 7-96l6-33-105 5c-151 8-157 13-150 131l4 57h238z"/>
         <path d="m6608 4460c-224-14-344-58-386-140-28-55-24-107 18-196l28-62 173-7c212-9 853 8 891 23 15 6 35 23 44 38 17 25 17 34 0 183-9 85-18 156-19 157-9 6-658 9-749 4zm312-50c12-19 2-37-25-44-18-5-26-16-32-48-9-45-35-70-54-51-6 6-19 40-29 76-14 49-15 68-7 77 16 16 136 8 147-10z"/>
         <path d="m10056 4458c-129-14-148-31-167-150-11-69-4-149 17-190 12-24 21-27 91-35 99-10 736-11 785 0 54 11 70 48 76 170 5 106-13 181-46 191-87 25-577 35-756 14zm190-41c14-13-17-86-45-109-16-13-34-33-40-46-22-43-52-25-85 51-33 74-30 95 15 109 29 8 145 5 155-5zm304-102c10-12 9-16-4-21-24-9-66 4-66 21 0 20 53 20 70 0z"/>
         <path d="m11172 4460c-105-11-128-23-149-79-23-58-23-192 0-276 9-32 14-61 12-64-3-2-14 4-25 14-19 18-20 17-20-2 0-12 8-30 18-41 16-19 24-20 162-12 80 5 271 9 425 10s298 4 320 8c92 17-16 25-410 29-225 3-414 9-418 13-5 4 99 10 230 14 397 10 641 21 648 28 14 14-78 167-137 229-7 8-26 30-42 49-26 31-27 35-10 41s16 8-9 18c-68 27-419 39-595 21zm536-71c12-5 22-15 22-24 0-54-217-38-228 17-2 11 5 18 20 20 36 5 161-4 186-13z"/>
         <path d="m8650 4047c1-53-12-52 432-55 453-4 674 3 643 21-12 6-201 12-514 16-430 6-500 9-528 23-32 16-33 16-33-5z"/>
         <path d="m9874 4055c-4-8 2-27 11-41 17-26 20-26 84-20 36 3 224 8 416 11 519 9 521 19 4 25-417 5-459 7-476 23-24 21-32 21-39 2z"/>
         <path d="m4890 4034c0-26 19-53 48-68 23-12 104-12 512-5 482 9 618 15 605 27-4 4-249 7-545 7h-539l-28 28c-33 30-53 35-53 11z"/>
         <path d="m6196 4035c-10-26 4-42 42-49 134-23 943-30 1061-9 29 5 31 7 16 16-11 6-222 12-541 16-477 6-524 8-541 24-24 21-29 21-37 2z"/>
         <path d="m7476 4033c-4-9 0-23 9-32 14-14 67-16 448-15 238 1 468 5 512 10 59 7-47 10-411 14-450 5-494 6-511 23-25 21-39 22-47 0z"/>
         <path d="m3500 4012c0-5 6-16 13-25 9-13 39-19 132-27 136-11 1014-11 1060 0l30 7-25 6c-14 4-270 8-570 9-496 3-548 5-579 21-36 18-61 22-61 9z"/>
         <path d="m1974 3998c-11-17 31-63 57-63 325 0 1287 19 1294 26 5 6 2 9-10 9-299 1-1258 23-1290 29-28 5-48 5-51-1z"/>
         <path d="m10515 2571c-60-16-105-40-150-82-110-101-134-214-63-295 69-78 98-67 98 36 0 52 4 71 18 83 44 40 120 30 188-24 43-34 73-36 130-10 95 43 97 118 5 214-63 67-152 98-226 78z"/>
         <path d="m10444 2289c-20-40-12-87 21-123 20-21 33-26 73-26 48 0 102 27 102 51 0 5-21 19-47 31-25 12-62 39-82 60s-39 38-43 38-15-14-24-31z"/>
         <path d="m2855 2414c-172-26-290-136-310-289-6-41-2-62 19-114 14-35 38-80 52-99 26-33 28-34 41-16 9 12 11 33 7 65-7 52 1 99 16 99 5 0 28-24 50-52 56-72 95-98 146-98 80 0 154 84 154 174 0 33-7 47-51 93-28 29-49 59-46 66 11 36 110 11 193-48l49-35 3 46c6 83-53 160-146 192-39 13-135 22-177 16z"/>
         <path d="m11460 3320c-173-5-630-13-1015-19s-1013-16-1395-22-713-14-735-19c-69-14 3391 13 3667 28 111 7 140 13 124 29-11 11-289 12-646 3z"/>
         <path d="m9500 3229c-443-5-857-13-920-17-172-14 1215-14 2369-1 532 6 999 14 1037 18 89 11-1441 10-2486 0z"/>
         <path d="m9920 3169c-702-10-1664-30-1669-35-14-14 2963 7 3027 21 116 26-251 30-1358 14z"/>
         <path d="m10295 3083c-336-8-710-26-728-34-43-19 1678 9 1913 30 77 8-927 11-1185 4z"/>
         <path d="m38 2265c-125-71 83-411 322-527 56-28 76-32 145-32 94-1 146 20 184 75 21 31 23 41 18 121-3 48-8 92-12 98s-71 10-172 10c-158 0-167 1-217 26-104 52-168 126-137 157 49 49-63 110-131 72zm225-260c40-34 50-49 62-99 9-32 25-72 36-88 12-16 19-31 17-33-7-7-166 105-223 157-67 61-85 99-85 179v62l73-69c39-38 93-87 120-109zm344-106c40-25 76-73 71-96-9-46-132-56-186-16-22 16-28 29-30 71-3 50-2 51 30 61 40 12 72 6 115-20z"/>
        </g>
    </g>
</svg>

 

import { Component,OnInit,OnDestroy,AfterViewInit,Input } from '@angular/core';

@Component({
    selector: "icon-car-bus"
    ,templateUrl: "./icon.car.bus.component.html"
    ,styleUrls: ["./icon.car.bus.component.scss"]
})
export class IconCarBusComponent implements OnInit,OnDestroy,AfterViewInit {
    isContinue:boolean = true;
    @Input() bgColor:string = "fill-success";
    @Input() borderColor:string = "";
    @Input() imgWidth:string = "";
    @Input() imgHeight:string = "";

    constructor(){

    }

    ngOnInit() {
        let dW = 451;
        let dH = 139;
        if(!this.imgHeight) {
            let cW = parseInt(this.imgWidth);
            let tH = cW * dH / dW;
            this.imgHeight = "" + tH;
        }else{
            let cH = parseInt(this.imgHeight);
            let tW = cH * dW / dH;
            this.imgWidth = "" + tW;
        }
    }

    ngOnDestroy() {
        this.isContinue = false;
    }

    ngAfterViewInit() {
        
    }
}

 

<icon-car-bus
    [bgColor]="'fill-dark'"
    [borderColor]=""
    [imgWidth]="''"
    [imgHeight]="'50'"
    class="d-inline-block"></icon-car-bus>

 

 

 

 

 

 

 

 

 

 

'프로그램 > html' 카테고리의 다른 글

bootstrap-icons  (0) 2021.05.14
angular 10 excel lib  (0) 2021.05.14
angular 10 hrm (hot module replacement)  (0) 2021.05.14
angular 10 observable await  (0) 2021.05.14
html5 indexeddb insert with promise  (0) 2021.05.14