KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
How to use wrap method in green
Best Python code snippet using green
FeatherIcons.js
Source:FeatherIcons.js 
1import React from "react"2import { Card, CardHeader, CardBody, Row, Col } from "reactstrap"3import Breadcrumbs from "../../../components/@vuexy/breadCrumbs/BreadCrumb"4import * as Icon from "react-feather"5class FeatherIcons extends React.Component {6 render() {7 return (8 <React.Fragment>9 <Breadcrumbs10 breadCrumbTitle="Feather Icons"11 breadCrumbParent="Icons"12 breadCrumbActive="Feather Icons"13 />14 <Card>15 <CardHeader></CardHeader>16 <CardBody>17 <Row>18 <Col sm="6" md="4" className="fonticon-container">19 <div className="fonticon-wrap">20 <Icon.Activity size={32} className="mr-4 fonticon-wrap" />21 </div>22 <label className="fonticon-classname">Activity</label>23 </Col>24 <Col sm="6" md="4" className="fonticon-container">25 <div className="fonticon-wrap">26 <Icon.Airplay size={32} className="mr-4 fonticon-wrap" />27 </div>28 <label className="fonticon-classname">Airplay</label>29 </Col>30 <Col sm="6" md="4" className="fonticon-container">31 <div className="fonticon-wrap">32 <Icon.AlertCircle size={32} className="mr-4 fonticon-wrap" />33 </div>34 <label className="fonticon-classname">AlertCircle</label>35 </Col>36 <Col sm="6" md="4" className="fonticon-container">37 <div className="fonticon-wrap">38 <Icon.AlertOctagon size={32} className="mr-4 fonticon-wrap" />39 </div>40 <label className="fonticon-classname">AlertOctagon</label>41 </Col>42 <Col sm="6" md="4" className="fonticon-container">43 <div className="fonticon-wrap">44 <Icon.AlertTriangle45 size={32}46 className="mr-4 fonticon-wrap"47 />48 </div>49 <label className="fonticon-classname">AlertTriangle</label>50 </Col>51 <Col sm="6" md="4" className="fonticon-container">52 <div className="fonticon-wrap">53 <Icon.AlignCenter size={32} className="mr-4 fonticon-wrap" />54 </div>55 <label className="fonticon-classname">AlignCenter</label>56 </Col>57 <Col sm="6" md="4" className="fonticon-container">58 <div className="fonticon-wrap">59 <Icon.AlignJustify size={32} className="mr-4 fonticon-wrap" />60 </div>61 <label className="fonticon-classname">AlignJustify</label>62 </Col>63 <Col sm="6" md="4" className="fonticon-container">64 <div className="fonticon-wrap">65 <Icon.AlignLeft size={32} className="mr-4 fonticon-wrap" />66 </div>67 <label className="fonticon-classname">AlignLeft</label>68 </Col>69 <Col sm="6" md="4" className="fonticon-container">70 <div className="fonticon-wrap">71 <Icon.AlignRight size={32} className="mr-4 fonticon-wrap" />72 </div>73 <label className="fonticon-classname">AlignRight</label>74 </Col>75 <Col sm="6" md="4" className="fonticon-container">76 <div className="fonticon-wrap">77 <Icon.Anchor size={32} className="mr-4 fonticon-wrap" />78 </div>79 <label className="fonticon-classname">Anchor</label>80 </Col>81 <Col sm="6" md="4" className="fonticon-container">82 <div className="fonticon-wrap">83 <Icon.Aperture size={32} className="mr-4 fonticon-wrap" />84 </div>85 <label className="fonticon-classname">Aperture</label>86 </Col>87 <Col sm="6" md="4" className="fonticon-container">88 <div className="fonticon-wrap">89 <Icon.Archive size={32} className="mr-4 fonticon-wrap" />90 </div>91 <label className="fonticon-classname">Archive</label>92 </Col>93 <Col sm="6" md="4" className="fonticon-container">94 <div className="fonticon-wrap">95 <Icon.ArrowDownCircle96 size={32}97 className="mr-4 fonticon-wrap"98 />99 </div>100 <label className="fonticon-classname">ArrowDownCircle</label>101 </Col>102 <Col sm="6" md="4" className="fonticon-container">103 <div className="fonticon-wrap">104 <Icon.ArrowDownLeft105 size={32}106 className="mr-4 fonticon-wrap"107 />108 </div>109 <label className="fonticon-classname">ArrowDownLeft</label>110 </Col>111 <Col sm="6" md="4" className="fonticon-container">112 <div className="fonticon-wrap">113 <Icon.ArrowDownRight114 size={32}115 className="mr-4 fonticon-wrap"116 />117 </div>118 <label className="fonticon-classname">ArrowDownRight</label>119 </Col>120 <Col sm="6" md="4" className="fonticon-container">121 <div className="fonticon-wrap">122 <Icon.ArrowDown size={32} className="mr-4 fonticon-wrap" />123 </div>124 <label className="fonticon-classname">ArrowDown</label>125 </Col>126 <Col sm="6" md="4" className="fonticon-container">127 <div className="fonticon-wrap">128 <Icon.ArrowLeftCircle129 size={32}130 className="mr-4 fonticon-wrap"131 />132 </div>133 <label className="fonticon-classname">ArrowLeftCircle</label>134 </Col>135 <Col sm="6" md="4" className="fonticon-container">136 <div className="fonticon-wrap">137 <Icon.ArrowLeft size={32} className="mr-4 fonticon-wrap" />138 </div>139 <label className="fonticon-classname">ArrowLeft</label>140 </Col>141 <Col sm="6" md="4" className="fonticon-container">142 <div className="fonticon-wrap">143 <Icon.ArrowRightCircle144 size={32}145 className="mr-4 fonticon-wrap"146 />147 </div>148 <label className="fonticon-classname">ArrowRightCircle</label>149 </Col>150 <Col sm="6" md="4" className="fonticon-container">151 <div className="fonticon-wrap">152 <Icon.ArrowRight size={32} className="mr-4 fonticon-wrap" />153 </div>154 <label className="fonticon-classname">ArrowRight</label>155 </Col>156 <Col sm="6" md="4" className="fonticon-container">157 <div className="fonticon-wrap">158 <Icon.ArrowUpCircle159 size={32}160 className="mr-4 fonticon-wrap"161 />162 </div>163 <label className="fonticon-classname">ArrowUpCircle</label>164 </Col>165 <Col sm="6" md="4" className="fonticon-container">166 <div className="fonticon-wrap">167 <Icon.ArrowUpLeft size={32} className="mr-4 fonticon-wrap" />168 </div>169 <label className="fonticon-classname">ArrowUpLeft</label>170 </Col>171 <Col sm="6" md="4" className="fonticon-container">172 <div className="fonticon-wrap">173 <Icon.ArrowUpRight size={32} className="mr-4 fonticon-wrap" />174 </div>175 <label className="fonticon-classname">ArrowUpRight</label>176 </Col>177 <Col sm="6" md="4" className="fonticon-container">178 <div className="fonticon-wrap">179 <Icon.ArrowUp size={32} className="mr-4 fonticon-wrap" />180 </div>181 <label className="fonticon-classname">ArrowUp</label>182 </Col>183 <Col sm="6" md="4" className="fonticon-container">184 <div className="fonticon-wrap">185 <Icon.AtSign size={32} className="mr-4 fonticon-wrap" />186 </div>187 <label className="fonticon-classname">AtSign</label>188 </Col>189 <Col sm="6" md="4" className="fonticon-container">190 <div className="fonticon-wrap">191 <Icon.Award size={32} className="mr-4 fonticon-wrap" />192 </div>193 <label className="fonticon-classname">Award</label>194 </Col>195 <Col sm="6" md="4" className="fonticon-container">196 <div className="fonticon-wrap">197 <Icon.BarChart2 size={32} className="mr-4 fonticon-wrap" />198 </div>199 <label className="fonticon-classname">BarChart2</label>200 </Col>201 <Col sm="6" md="4" className="fonticon-container">202 <div className="fonticon-wrap">203 <Icon.BarChart size={32} className="mr-4 fonticon-wrap" />204 </div>205 <label className="fonticon-classname">BarChart</label>206 </Col>207 <Col sm="6" md="4" className="fonticon-container">208 <div className="fonticon-wrap">209 <Icon.BatteryCharging210 size={32}211 className="mr-4 fonticon-wrap"212 />213 </div>214 <label className="fonticon-classname">BatteryCharging</label>215 </Col>216 <Col sm="6" md="4" className="fonticon-container">217 <div className="fonticon-wrap">218 <Icon.Battery size={32} className="mr-4 fonticon-wrap" />219 </div>220 <label className="fonticon-classname">Battery</label>221 </Col>222 <Col sm="6" md="4" className="fonticon-container">223 <div className="fonticon-wrap">224 <Icon.BellOff size={32} className="mr-4 fonticon-wrap" />225 </div>226 <label className="fonticon-classname">BellOff</label>227 </Col>228 <Col sm="6" md="4" className="fonticon-container">229 <div className="fonticon-wrap">230 <Icon.Bell size={32} className="mr-4 fonticon-wrap" />231 </div>232 <label className="fonticon-classname">Bell</label>233 </Col>234 <Col sm="6" md="4" className="fonticon-container">235 <div className="fonticon-wrap">236 <Icon.Bluetooth size={32} className="mr-4 fonticon-wrap" />237 </div>238 <label className="fonticon-classname">Bluetooth</label>239 </Col>240 <Col sm="6" md="4" className="fonticon-container">241 <div className="fonticon-wrap">242 <Icon.Bold size={32} className="mr-4 fonticon-wrap" />243 </div>244 <label className="fonticon-classname">Bold</label>245 </Col>246 <Col sm="6" md="4" className="fonticon-container">247 <div className="fonticon-wrap">248 <Icon.BookOpen size={32} className="mr-4 fonticon-wrap" />249 </div>250 <label className="fonticon-classname">BookOpen</label>251 </Col>252 <Col sm="6" md="4" className="fonticon-container">253 <div className="fonticon-wrap">254 <Icon.Book size={32} className="mr-4 fonticon-wrap" />255 </div>256 <label className="fonticon-classname">Book</label>257 </Col>258 <Col sm="6" md="4" className="fonticon-container">259 <div className="fonticon-wrap">260 <Icon.Bookmark size={32} className="mr-4 fonticon-wrap" />261 </div>262 <label className="fonticon-classname">Bookmark</label>263 </Col>264 <Col sm="6" md="4" className="fonticon-container">265 <div className="fonticon-wrap">266 <Icon.Box size={32} className="mr-4 fonticon-wrap" />267 </div>268 <label className="fonticon-classname">Box</label>269 </Col>270 <Col sm="6" md="4" className="fonticon-container">271 <div className="fonticon-wrap">272 <Icon.Briefcase size={32} className="mr-4 fonticon-wrap" />273 </div>274 <label className="fonticon-classname">Briefcase</label>275 </Col>276 <Col sm="6" md="4" className="fonticon-container">277 <div className="fonticon-wrap">278 <Icon.Calendar size={32} className="mr-4 fonticon-wrap" />279 </div>280 <label className="fonticon-classname">Calendar</label>281 </Col>282 <Col sm="6" md="4" className="fonticon-container">283 <div className="fonticon-wrap">284 <Icon.CameraOff size={32} className="mr-4 fonticon-wrap" />285 </div>286 <label className="fonticon-classname">CameraOff</label>287 </Col>288 <Col sm="6" md="4" className="fonticon-container">289 <div className="fonticon-wrap">290 <Icon.Camera size={32} className="mr-4 fonticon-wrap" />291 </div>292 <label className="fonticon-classname">Camera</label>293 </Col>294 <Col sm="6" md="4" className="fonticon-container">295 <div className="fonticon-wrap">296 <Icon.Cast size={32} className="mr-4 fonticon-wrap" />297 </div>298 <label className="fonticon-classname">Cast</label>299 </Col>300 <Col sm="6" md="4" className="fonticon-container">301 <div className="fonticon-wrap">302 <Icon.CheckCircle size={32} className="mr-4 fonticon-wrap" />303 </div>304 <label className="fonticon-classname">CheckCircle</label>305 </Col>306 <Col sm="6" md="4" className="fonticon-container">307 <div className="fonticon-wrap">308 <Icon.CheckSquare size={32} className="mr-4 fonticon-wrap" />309 </div>310 <label className="fonticon-classname">CheckSquare</label>311 </Col>312 <Col sm="6" md="4" className="fonticon-container">313 <div className="fonticon-wrap">314 <Icon.Check size={32} className="mr-4 fonticon-wrap" />315 </div>316 <label className="fonticon-classname">Check</label>317 </Col>318 <Col sm="6" md="4" className="fonticon-container">319 <div className="fonticon-wrap">320 <Icon.ChevronDown size={32} className="mr-4 fonticon-wrap" />321 </div>322 <label className="fonticon-classname">ChevronDown</label>323 </Col>324 <Col sm="6" md="4" className="fonticon-container">325 <div className="fonticon-wrap">326 <Icon.ChevronLeft size={32} className="mr-4 fonticon-wrap" />327 </div>328 <label className="fonticon-classname">ChevronLeft</label>329 </Col>330 <Col sm="6" md="4" className="fonticon-container">331 <div className="fonticon-wrap">332 <Icon.ChevronRight size={32} className="mr-4 fonticon-wrap" />333 </div>334 <label className="fonticon-classname">ChevronRight</label>335 </Col>336 <Col sm="6" md="4" className="fonticon-container">337 <div className="fonticon-wrap">338 <Icon.ChevronUp size={32} className="mr-4 fonticon-wrap" />339 </div>340 <label className="fonticon-classname">ChevronUp</label>341 </Col>342 <Col sm="6" md="4" className="fonticon-container">343 <div className="fonticon-wrap">344 <Icon.ChevronsDown size={32} className="mr-4 fonticon-wrap" />345 </div>346 <label className="fonticon-classname">ChevronsDown</label>347 </Col>348 <Col sm="6" md="4" className="fonticon-container">349 <div className="fonticon-wrap">350 <Icon.ChevronsLeft size={32} className="mr-4 fonticon-wrap" />351 </div>352 <label className="fonticon-classname">ChevronsLeft</label>353 </Col>354 <Col sm="6" md="4" className="fonticon-container">355 <div className="fonticon-wrap">356 <Icon.ChevronsRight357 size={32}358 className="mr-4 fonticon-wrap"359 />360 </div>361 <label className="fonticon-classname">ChevronsRight</label>362 </Col>363 <Col sm="6" md="4" className="fonticon-container">364 <div className="fonticon-wrap">365 <Icon.ChevronsUp size={32} className="mr-4 fonticon-wrap" />366 </div>367 <label className="fonticon-classname">ChevronsUp</label>368 </Col>369 <Col sm="6" md="4" className="fonticon-container">370 <div className="fonticon-wrap">371 <Icon.Chrome size={32} className="mr-4 fonticon-wrap" />372 </div>373 <label className="fonticon-classname">Chrome</label>374 </Col>375 <Col sm="6" md="4" className="fonticon-container">376 <div className="fonticon-wrap">377 <Icon.Circle size={32} className="mr-4 fonticon-wrap" />378 </div>379 <label className="fonticon-classname">Circle</label>380 </Col>381 <Col sm="6" md="4" className="fonticon-container">382 <div className="fonticon-wrap">383 <Icon.Clipboard size={32} className="mr-4 fonticon-wrap" />384 </div>385 <label className="fonticon-classname">Clipboard</label>386 </Col>387 <Col sm="6" md="4" className="fonticon-container">388 <div className="fonticon-wrap">389 <Icon.Clock size={32} className="mr-4 fonticon-wrap" />390 </div>391 <label className="fonticon-classname">Clock</label>392 </Col>393 <Col sm="6" md="4" className="fonticon-container">394 <div className="fonticon-wrap">395 <Icon.CloudDrizzle size={32} className="mr-4 fonticon-wrap" />396 </div>397 <label className="fonticon-classname">CloudDrizzle</label>398 </Col>399 <Col sm="6" md="4" className="fonticon-container">400 <div className="fonticon-wrap">401 <Icon.CloudLightning402 size={32}403 className="mr-4 fonticon-wrap"404 />405 </div>406 <label className="fonticon-classname">CloudLightning</label>407 </Col>408 <Col sm="6" md="4" className="fonticon-container">409 <div className="fonticon-wrap">410 <Icon.CloudOff size={32} className="mr-4 fonticon-wrap" />411 </div>412 <label className="fonticon-classname">CloudOff</label>413 </Col>414 <Col sm="6" md="4" className="fonticon-container">415 <div className="fonticon-wrap">416 <Icon.CloudRain size={32} className="mr-4 fonticon-wrap" />417 </div>418 <label className="fonticon-classname">CloudRain</label>419 </Col>420 <Col sm="6" md="4" className="fonticon-container">421 <div className="fonticon-wrap">422 <Icon.CloudSnow size={32} className="mr-4 fonticon-wrap" />423 </div>424 <label className="fonticon-classname">CloudSnow</label>425 </Col>426 <Col sm="6" md="4" className="fonticon-container">427 <div className="fonticon-wrap">428 <Icon.Cloud size={32} className="mr-4 fonticon-wrap" />429 </div>430 <label className="fonticon-classname">Cloud</label>431 </Col>432 <Col sm="6" md="4" className="fonticon-container">433 <div className="fonticon-wrap">434 <Icon.Code size={32} className="mr-4 fonticon-wrap" />435 </div>436 <label className="fonticon-classname">Code</label>437 </Col>438 <Col sm="6" md="4" className="fonticon-container">439 <div className="fonticon-wrap">440 <Icon.Codepen size={32} className="mr-4 fonticon-wrap" />441 </div>442 <label className="fonticon-classname">Codepen</label>443 </Col>444 <Col sm="6" md="4" className="fonticon-container">445 <div className="fonticon-wrap">446 <Icon.Coffee size={32} className="mr-4 fonticon-wrap" />447 </div>448 <label className="fonticon-classname">Coffee</label>449 </Col>450 <Col sm="6" md="4" className="fonticon-container">451 <div className="fonticon-wrap">452 <Icon.Command size={32} className="mr-4 fonticon-wrap" />453 </div>454 <label className="fonticon-classname">Command</label>455 </Col>456 <Col sm="6" md="4" className="fonticon-container">457 <div className="fonticon-wrap">458 <Icon.Compass size={32} className="mr-4 fonticon-wrap" />459 </div>460 <label className="fonticon-classname">Compass</label>461 </Col>462 <Col sm="6" md="4" className="fonticon-container">463 <div className="fonticon-wrap">464 <Icon.Copy size={32} className="mr-4 fonticon-wrap" />465 </div>466 <label className="fonticon-classname">Copy</label>467 </Col>468 <Col sm="6" md="4" className="fonticon-container">469 <div className="fonticon-wrap">470 <Icon.CornerDownLeft471 size={32}472 className="mr-4 fonticon-wrap"473 />474 </div>475 <label className="fonticon-classname">CornerDownLeft</label>476 </Col>477 <Col sm="6" md="4" className="fonticon-container">478 <div className="fonticon-wrap">479 <Icon.CornerDownRight480 size={32}481 className="mr-4 fonticon-wrap"482 />483 </div>484 <label className="fonticon-classname">CornerDownRight</label>485 </Col>486 <Col sm="6" md="4" className="fonticon-container">487 <div className="fonticon-wrap">488 <Icon.CornerLeftDown489 size={32}490 className="mr-4 fonticon-wrap"491 />492 </div>493 <label className="fonticon-classname">CornerLeftDown</label>494 </Col>495 <Col sm="6" md="4" className="fonticon-container">496 <div className="fonticon-wrap">497 <Icon.CornerLeftUp size={32} className="mr-4 fonticon-wrap" />498 </div>499 <label className="fonticon-classname">CornerLeftUp</label>500 </Col>501 <Col sm="6" md="4" className="fonticon-container">502 <div className="fonticon-wrap">503 <Icon.CornerRightDown504 size={32}505 className="mr-4 fonticon-wrap"506 />507 </div>508 <label className="fonticon-classname">CornerRightDown</label>509 </Col>510 <Col sm="6" md="4" className="fonticon-container">511 <div className="fonticon-wrap">512 <Icon.CornerRightUp513 size={32}514 className="mr-4 fonticon-wrap"515 />516 </div>517 <label className="fonticon-classname">CornerRightUp</label>518 </Col>519 <Col sm="6" md="4" className="fonticon-container">520 <div className="fonticon-wrap">521 <Icon.CornerUpLeft size={32} className="mr-4 fonticon-wrap" />522 </div>523 <label className="fonticon-classname">CornerUpLeft</label>524 </Col>525 <Col sm="6" md="4" className="fonticon-container">526 <div className="fonticon-wrap">527 <Icon.CornerUpRight528 size={32}529 className="mr-4 fonticon-wrap"530 />531 </div>532 <label className="fonticon-classname">CornerUpRight</label>533 </Col>534 <Col sm="6" md="4" className="fonticon-container">535 <div className="fonticon-wrap">536 <Icon.Cpu size={32} className="mr-4 fonticon-wrap" />537 </div>538 <label className="fonticon-classname">Cpu</label>539 </Col>540 <Col sm="6" md="4" className="fonticon-container">541 <div className="fonticon-wrap">542 <Icon.CreditCard size={32} className="mr-4 fonticon-wrap" />543 </div>544 <label className="fonticon-classname">CreditCard</label>545 </Col>546 <Col sm="6" md="4" className="fonticon-container">547 <div className="fonticon-wrap">548 <Icon.Crop size={32} className="mr-4 fonticon-wrap" />549 </div>550 <label className="fonticon-classname">Crop</label>551 </Col>552 <Col sm="6" md="4" className="fonticon-container">553 <div className="fonticon-wrap">554 <Icon.Crosshair size={32} className="mr-4 fonticon-wrap" />555 </div>556 <label className="fonticon-classname">Crosshair</label>557 </Col>558 <Col sm="6" md="4" className="fonticon-container">559 <div className="fonticon-wrap">560 <Icon.Database size={32} className="mr-4 fonticon-wrap" />561 </div>562 <label className="fonticon-classname">Database</label>563 </Col>564 <Col sm="6" md="4" className="fonticon-container">565 <div className="fonticon-wrap">566 <Icon.Delete size={32} className="mr-4 fonticon-wrap" />567 </div>568 <label className="fonticon-classname">Delete</label>569 </Col>570 <Col sm="6" md="4" className="fonticon-container">571 <div className="fonticon-wrap">572 <Icon.Disc size={32} className="mr-4 fonticon-wrap" />573 </div>574 <label className="fonticon-classname">Disc</label>575 </Col>576 <Col sm="6" md="4" className="fonticon-container">577 <div className="fonticon-wrap">578 <Icon.DollarSign size={32} className="mr-4 fonticon-wrap" />579 </div>580 <label className="fonticon-classname">DollarSign</label>581 </Col>582 <Col sm="6" md="4" className="fonticon-container">583 <div className="fonticon-wrap">584 <Icon.DownloadCloud585 size={32}586 className="mr-4 fonticon-wrap"587 />588 </div>589 <label className="fonticon-classname">DownloadCloud</label>590 </Col>591 <Col sm="6" md="4" className="fonticon-container">592 <div className="fonticon-wrap">593 <Icon.Download size={32} className="mr-4 fonticon-wrap" />594 </div>595 <label className="fonticon-classname">Download</label>596 </Col>597 <Col sm="6" md="4" className="fonticon-container">598 <div className="fonticon-wrap">599 <Icon.Droplet size={32} className="mr-4 fonticon-wrap" />600 </div>601 <label className="fonticon-classname">Droplet</label>602 </Col>603 <Col sm="6" md="4" className="fonticon-container">604 <div className="fonticon-wrap">605 <Icon.Edit2 size={32} className="mr-4 fonticon-wrap" />606 </div>607 <label className="fonticon-classname">Edit2</label>608 </Col>609 <Col sm="6" md="4" className="fonticon-container">610 <div className="fonticon-wrap">611 <Icon.Edit3 size={32} className="mr-4 fonticon-wrap" />612 </div>613 <label className="fonticon-classname">Edit3</label>614 </Col>615 <Col sm="6" md="4" className="fonticon-container">616 <div className="fonticon-wrap">617 <Icon.Edit size={32} className="mr-4 fonticon-wrap" />618 </div>619 <label className="fonticon-classname">Edit</label>620 </Col>621 <Col sm="6" md="4" className="fonticon-container">622 <div className="fonticon-wrap">623 <Icon.ExternalLink size={32} className="mr-4 fonticon-wrap" />624 </div>625 <label className="fonticon-classname">ExternalLink</label>626 </Col>627 <Col sm="6" md="4" className="fonticon-container">628 <div className="fonticon-wrap">629 <Icon.EyeOff size={32} className="mr-4 fonticon-wrap" />630 </div>631 <label className="fonticon-classname">EyeOff</label>632 </Col>633 <Col sm="6" md="4" className="fonticon-container">634 <div className="fonticon-wrap">635 <Icon.Eye size={32} className="mr-4 fonticon-wrap" />636 </div>637 <label className="fonticon-classname">Eye</label>638 </Col>639 <Col sm="6" md="4" className="fonticon-container">640 <div className="fonticon-wrap">641 <Icon.Facebook size={32} className="mr-4 fonticon-wrap" />642 </div>643 <label className="fonticon-classname">Facebook</label>644 </Col>645 <Col sm="6" md="4" className="fonticon-container">646 <div className="fonticon-wrap">647 <Icon.FastForward size={32} className="mr-4 fonticon-wrap" />648 </div>649 <label className="fonticon-classname">FastForward</label>650 </Col>651 <Col sm="6" md="4" className="fonticon-container">652 <div className="fonticon-wrap">653 <Icon.Feather size={32} className="mr-4 fonticon-wrap" />654 </div>655 <label className="fonticon-classname">Feather</label>656 </Col>657 <Col sm="6" md="4" className="fonticon-container">658 <div className="fonticon-wrap">659 <Icon.FileMinus size={32} className="mr-4 fonticon-wrap" />660 </div>661 <label className="fonticon-classname">FileMinus</label>662 </Col>663 <Col sm="6" md="4" className="fonticon-container">664 <div className="fonticon-wrap">665 <Icon.FilePlus size={32} className="mr-4 fonticon-wrap" />666 </div>667 <label className="fonticon-classname">FilePlus</label>668 </Col>669 <Col sm="6" md="4" className="fonticon-container">670 <div className="fonticon-wrap">671 <Icon.FileText size={32} className="mr-4 fonticon-wrap" />672 </div>673 <label className="fonticon-classname">FileText</label>674 </Col>675 <Col sm="6" md="4" className="fonticon-container">676 <div className="fonticon-wrap">677 <Icon.File size={32} className="mr-4 fonticon-wrap" />678 </div>679 <label className="fonticon-classname">File</label>680 </Col>681 <Col sm="6" md="4" className="fonticon-container">682 <div className="fonticon-wrap">683 <Icon.Film size={32} className="mr-4 fonticon-wrap" />684 </div>685 <label className="fonticon-classname">Film</label>686 </Col>687 <Col sm="6" md="4" className="fonticon-container">688 <div className="fonticon-wrap">689 <Icon.Filter size={32} className="mr-4 fonticon-wrap" />690 </div>691 <label className="fonticon-classname">Filter</label>692 </Col>693 <Col sm="6" md="4" className="fonticon-container">694 <div className="fonticon-wrap">695 <Icon.Flag size={32} className="mr-4 fonticon-wrap" />696 </div>697 <label className="fonticon-classname">Flag</label>698 </Col>699 <Col sm="6" md="4" className="fonticon-container">700 <div className="fonticon-wrap">701 <Icon.FolderMinus size={32} className="mr-4 fonticon-wrap" />702 </div>703 <label className="fonticon-classname">FolderMinus</label>704 </Col>705 <Col sm="6" md="4" className="fonticon-container">706 <div className="fonticon-wrap">707 <Icon.FolderPlus size={32} className="mr-4 fonticon-wrap" />708 </div>709 <label className="fonticon-classname">FolderPlus</label>710 </Col>711 <Col sm="6" md="4" className="fonticon-container">712 <div className="fonticon-wrap">713 <Icon.Folder size={32} className="mr-4 fonticon-wrap" />714 </div>715 <label className="fonticon-classname">Folder</label>716 </Col>717 <Col sm="6" md="4" className="fonticon-container">718 <div className="fonticon-wrap">719 <Icon.Gift size={32} className="mr-4 fonticon-wrap" />720 </div>721 <label className="fonticon-classname">Gift</label>722 </Col>723 <Col sm="6" md="4" className="fonticon-container">724 <div className="fonticon-wrap">725 <Icon.GitBranch size={32} className="mr-4 fonticon-wrap" />726 </div>727 <label className="fonticon-classname">GitBranch</label>728 </Col>729 <Col sm="6" md="4" className="fonticon-container">730 <div className="fonticon-wrap">731 <Icon.GitCommit size={32} className="mr-4 fonticon-wrap" />732 </div>733 <label className="fonticon-classname">GitCommit</label>734 </Col>735 <Col sm="6" md="4" className="fonticon-container">736 <div className="fonticon-wrap">737 <Icon.GitMerge size={32} className="mr-4 fonticon-wrap" />738 </div>739 <label className="fonticon-classname">GitMerge</label>740 </Col>741 <Col sm="6" md="4" className="fonticon-container">742 <div className="fonticon-wrap">743 <Icon.GitPullRequest744 size={32}745 className="mr-4 fonticon-wrap"746 />747 </div>748 <label className="fonticon-classname">GitPullRequest</label>749 </Col>750 <Col sm="6" md="4" className="fonticon-container">751 <div className="fonticon-wrap">752 <Icon.Gitlab size={32} className="mr-4 fonticon-wrap" />753 </div>754 <label className="fonticon-classname">Gitlab</label>755 </Col>756 <Col sm="6" md="4" className="fonticon-container">757 <div className="fonticon-wrap">758 <Icon.Globe size={32} className="mr-4 fonticon-wrap" />759 </div>760 <label className="fonticon-classname">Globe</label>761 </Col>762 <Col sm="6" md="4" className="fonticon-container">763 <div className="fonticon-wrap">764 <Icon.Grid size={32} className="mr-4 fonticon-wrap" />765 </div>766 <label className="fonticon-classname">Grid</label>767 </Col>768 <Col sm="6" md="4" className="fonticon-container">769 <div className="fonticon-wrap">770 <Icon.HardDrive size={32} className="mr-4 fonticon-wrap" />771 </div>772 <label className="fonticon-classname">HardDrive</label>773 </Col>774 <Col sm="6" md="4" className="fonticon-container">775 <div className="fonticon-wrap">776 <Icon.Hash size={32} className="mr-4 fonticon-wrap" />777 </div>778 <label className="fonticon-classname">Hash</label>779 </Col>780 <Col sm="6" md="4" className="fonticon-container">781 <div className="fonticon-wrap">782 <Icon.Headphones size={32} className="mr-4 fonticon-wrap" />783 </div>784 <label className="fonticon-classname">Headphones</label>785 </Col>786 <Col sm="6" md="4" className="fonticon-container">787 <div className="fonticon-wrap">788 <Icon.Heart size={32} className="mr-4 fonticon-wrap" />789 </div>790 <label className="fonticon-classname">Heart</label>791 </Col>792 <Col sm="6" md="4" className="fonticon-container">793 <div className="fonticon-wrap">794 <Icon.HelpCircle size={32} className="mr-4 fonticon-wrap" />795 </div>796 <label className="fonticon-classname">HelpCircle</label>797 </Col>798 <Col sm="6" md="4" className="fonticon-container">799 <div className="fonticon-wrap">800 <Icon.Home size={32} className="mr-4 fonticon-wrap" />801 </div>802 <label className="fonticon-classname">Home</label>803 </Col>804 <Col sm="6" md="4" className="fonticon-container">805 <div className="fonticon-wrap">806 <Icon.Image size={32} className="mr-4 fonticon-wrap" />807 </div>808 <label className="fonticon-classname">Image</label>809 </Col>810 <Col sm="6" md="4" className="fonticon-container">811 <div className="fonticon-wrap">812 <Icon.Inbox size={32} className="mr-4 fonticon-wrap" />813 </div>814 <label className="fonticon-classname">Inbox</label>815 </Col>816 <Col sm="6" md="4" className="fonticon-container">817 <div className="fonticon-wrap">818 <Icon.Info size={32} className="mr-4 fonticon-wrap" />819 </div>820 <label className="fonticon-classname">Info</label>821 </Col>822 <Col sm="6" md="4" className="fonticon-container">823 <div className="fonticon-wrap">824 <Icon.Instagram size={32} className="mr-4 fonticon-wrap" />825 </div>826 <label className="fonticon-classname">Instagram</label>827 </Col>828 <Col sm="6" md="4" className="fonticon-container">829 <div className="fonticon-wrap">830 <Icon.Italic size={32} className="mr-4 fonticon-wrap" />831 </div>832 <label className="fonticon-classname">Italic</label>833 </Col>834 <Col sm="6" md="4" className="fonticon-container">835 <div className="fonticon-wrap">836 <Icon.Layers size={32} className="mr-4 fonticon-wrap" />837 </div>838 <label className="fonticon-classname">Layers</label>839 </Col>840 <Col sm="6" md="4" className="fonticon-container">841 <div className="fonticon-wrap">842 <Icon.Layout size={32} className="mr-4 fonticon-wrap" />843 </div>844 <label className="fonticon-classname">Layout</label>845 </Col>846 <Col sm="6" md="4" className="fonticon-container">847 <div className="fonticon-wrap">848 <Icon.LifeBuoy size={32} className="mr-4 fonticon-wrap" />849 </div>850 <label className="fonticon-classname">LifeBuoy</label>851 </Col>852 <Col sm="6" md="4" className="fonticon-container">853 <div className="fonticon-wrap">854 <Icon.Link2 size={32} className="mr-4 fonticon-wrap" />855 </div>856 <label className="fonticon-classname">Link2</label>857 </Col>858 <Col sm="6" md="4" className="fonticon-container">859 <div className="fonticon-wrap">860 <Icon.Link size={32} className="mr-4 fonticon-wrap" />861 </div>862 <label className="fonticon-classname">Link</label>863 </Col>864 <Col sm="6" md="4" className="fonticon-container">865 <div className="fonticon-wrap">866 <Icon.Linkedin size={32} className="mr-4 fonticon-wrap" />867 </div>868 <label className="fonticon-classname">Linkedin</label>869 </Col>870 <Col sm="6" md="4" className="fonticon-container">871 <div className="fonticon-wrap">872 <Icon.List size={32} className="mr-4 fonticon-wrap" />873 </div>874 <label className="fonticon-classname">List</label>875 </Col>876 <Col sm="6" md="4" className="fonticon-container">877 <div className="fonticon-wrap">878 <Icon.Loader size={32} className="mr-4 fonticon-wrap" />879 </div>880 <label className="fonticon-classname">Loader</label>881 </Col>882 <Col sm="6" md="4" className="fonticon-container">883 <div className="fonticon-wrap">884 <Icon.Lock size={32} className="mr-4 fonticon-wrap" />885 </div>886 <label className="fonticon-classname">Lock</label>887 </Col>888 <Col sm="6" md="4" className="fonticon-container">889 <div className="fonticon-wrap">890 <Icon.LogIn size={32} className="mr-4 fonticon-wrap" />891 </div>892 <label className="fonticon-classname">LogIn</label>893 </Col>894 <Col sm="6" md="4" className="fonticon-container">895 <div className="fonticon-wrap">896 <Icon.LogOut size={32} className="mr-4 fonticon-wrap" />897 </div>898 <label className="fonticon-classname">LogOut</label>899 </Col>900 <Col sm="6" md="4" className="fonticon-container">901 <div className="fonticon-wrap">902 <Icon.Mail size={32} className="mr-4 fonticon-wrap" />903 </div>904 <label className="fonticon-classname">Mail</label>905 </Col>906 <Col sm="6" md="4" className="fonticon-container">907 <div className="fonticon-wrap">908 <Icon.MapPin size={32} className="mr-4 fonticon-wrap" />909 </div>910 <label className="fonticon-classname">MapPin</label>911 </Col>912 <Col sm="6" md="4" className="fonticon-container">913 <div className="fonticon-wrap">914 <Icon.Map size={32} className="mr-4 fonticon-wrap" />915 </div>916 <label className="fonticon-classname">Map</label>917 </Col>918 <Col sm="6" md="4" className="fonticon-container">919 <div className="fonticon-wrap">920 <Icon.Maximize2 size={32} className="mr-4 fonticon-wrap" />921 </div>922 <label className="fonticon-classname">Maximize2</label>923 </Col>924 <Col sm="6" md="4" className="fonticon-container">925 <div className="fonticon-wrap">926 <Icon.Maximize size={32} className="mr-4 fonticon-wrap" />927 </div>928 <label className="fonticon-classname">Maximize</label>929 </Col>930 <Col sm="6" md="4" className="fonticon-container">931 <div className="fonticon-wrap">932 <Icon.Menu size={32} className="mr-4 fonticon-wrap" />933 </div>934 <label className="fonticon-classname">Menu</label>935 </Col>936 <Col sm="6" md="4" className="fonticon-container">937 <div className="fonticon-wrap">938 <Icon.MessageCircle939 size={32}940 className="mr-4 fonticon-wrap"941 />942 </div>943 <label className="fonticon-classname">MessageCircle</label>944 </Col>945 <Col sm="6" md="4" className="fonticon-container">946 <div className="fonticon-wrap">947 <Icon.MessageSquare948 size={32}949 className="mr-4 fonticon-wrap"950 />951 </div>952 <label className="fonticon-classname">MessageSquare</label>953 </Col>954 <Col sm="6" md="4" className="fonticon-container">955 <div className="fonticon-wrap">956 <Icon.MicOff size={32} className="mr-4 fonticon-wrap" />957 </div>958 <label className="fonticon-classname">MicOff</label>959 </Col>960 <Col sm="6" md="4" className="fonticon-container">961 <div className="fonticon-wrap">962 <Icon.Mic size={32} className="mr-4 fonticon-wrap" />963 </div>964 <label className="fonticon-classname">Mic</label>965 </Col>966 <Col sm="6" md="4" className="fonticon-container">967 <div className="fonticon-wrap">968 <Icon.Minimize2 size={32} className="mr-4 fonticon-wrap" />969 </div>970 <label className="fonticon-classname">Minimize2</label>971 </Col>972 <Col sm="6" md="4" className="fonticon-container">973 <div className="fonticon-wrap">974 <Icon.Minimize size={32} className="mr-4 fonticon-wrap" />975 </div>976 <label className="fonticon-classname">Minimize</label>977 </Col>978 <Col sm="6" md="4" className="fonticon-container">979 <div className="fonticon-wrap">980 <Icon.MinusCircle size={32} className="mr-4 fonticon-wrap" />981 </div>982 <label className="fonticon-classname">MinusCircle</label>983 </Col>984 <Col sm="6" md="4" className="fonticon-container">985 <div className="fonticon-wrap">986 <Icon.MinusSquare size={32} className="mr-4 fonticon-wrap" />987 </div>988 <label className="fonticon-classname">MinusSquare</label>989 </Col>990 <Col sm="6" md="4" className="fonticon-container">991 <div className="fonticon-wrap">992 <Icon.Minus size={32} className="mr-4 fonticon-wrap" />993 </div>994 <label className="fonticon-classname">Minus</label>995 </Col>996 <Col sm="6" md="4" className="fonticon-container">997 <div className="fonticon-wrap">998 <Icon.Monitor size={32} className="mr-4 fonticon-wrap" />999 </div>1000 <label className="fonticon-classname">Monitor</label>1001 </Col>1002 <Col sm="6" md="4" className="fonticon-container">1003 <div className="fonticon-wrap">1004 <Icon.Moon size={32} className="mr-4 fonticon-wrap" />1005 </div>1006 <label className="fonticon-classname">Moon</label>1007 </Col>1008 <Col sm="6" md="4" className="fonticon-container">1009 <div className="fonticon-wrap">1010 <Icon.MoreHorizontal1011 size={32}1012 className="mr-4 fonticon-wrap"1013 />1014 </div>1015 <label className="fonticon-classname">MoreHorizontal</label>1016 </Col>1017 <Col sm="6" md="4" className="fonticon-container">1018 <div className="fonticon-wrap">1019 <Icon.MoreVertical size={32} className="mr-4 fonticon-wrap" />1020 </div>1021 <label className="fonticon-classname">MoreVertical</label>1022 </Col>1023 <Col sm="6" md="4" className="fonticon-container">1024 <div className="fonticon-wrap">1025 <Icon.Move size={32} className="mr-4 fonticon-wrap" />1026 </div>1027 <label className="fonticon-classname">Move</label>1028 </Col>1029 <Col sm="6" md="4" className="fonticon-container">1030 <div className="fonticon-wrap">1031 <Icon.Music size={32} className="mr-4 fonticon-wrap" />1032 </div>1033 <label className="fonticon-classname">Music</label>1034 </Col>1035 <Col sm="6" md="4" className="fonticon-container">1036 <div className="fonticon-wrap">1037 <Icon.Navigation2 size={32} className="mr-4 fonticon-wrap" />1038 </div>1039 <label className="fonticon-classname">Navigation2</label>1040 </Col>1041 <Col sm="6" md="4" className="fonticon-container">1042 <div className="fonticon-wrap">1043 <Icon.Navigation size={32} className="mr-4 fonticon-wrap" />1044 </div>1045 <label className="fonticon-classname">Navigation</label>1046 </Col>1047 <Col sm="6" md="4" className="fonticon-container">1048 <div className="fonticon-wrap">1049 <Icon.Octagon size={32} className="mr-4 fonticon-wrap" />1050 </div>1051 <label className="fonticon-classname">Octagon</label>1052 </Col>1053 <Col sm="6" md="4" className="fonticon-container">1054 <div className="fonticon-wrap">1055 <Icon.Package size={32} className="mr-4 fonticon-wrap" />1056 </div>1057 <label className="fonticon-classname">Package</label>1058 </Col>1059 <Col sm="6" md="4" className="fonticon-container">1060 <div className="fonticon-wrap">1061 <Icon.Paperclip size={32} className="mr-4 fonticon-wrap" />1062 </div>1063 <label className="fonticon-classname">Paperclip</label>1064 </Col>1065 <Col sm="6" md="4" className="fonticon-container">1066 <div className="fonticon-wrap">1067 <Icon.PauseCircle size={32} className="mr-4 fonticon-wrap" />1068 </div>1069 <label className="fonticon-classname">PauseCircle</label>1070 </Col>1071 <Col sm="6" md="4" className="fonticon-container">1072 <div className="fonticon-wrap">1073 <Icon.Pause size={32} className="mr-4 fonticon-wrap" />1074 </div>1075 <label className="fonticon-classname">Pause</label>1076 </Col>1077 <Col sm="6" md="4" className="fonticon-container">1078 <div className="fonticon-wrap">1079 <Icon.Percent size={32} className="mr-4 fonticon-wrap" />1080 </div>1081 <label className="fonticon-classname">Percent</label>1082 </Col>1083 <Col sm="6" md="4" className="fonticon-container">1084 <div className="fonticon-wrap">1085 <Icon.PhoneCall size={32} className="mr-4 fonticon-wrap" />1086 </div>1087 <label className="fonticon-classname">PhoneCall</label>1088 </Col>1089 <Col sm="6" md="4" className="fonticon-container">1090 <div className="fonticon-wrap">1091 <Icon.PhoneForwarded1092 size={32}1093 className="mr-4 fonticon-wrap"1094 />1095 </div>1096 <label className="fonticon-classname">PhoneForwarded</label>1097 </Col>1098 <Col sm="6" md="4" className="fonticon-container">1099 <div className="fonticon-wrap">1100 <Icon.PhoneIncoming1101 size={32}1102 className="mr-4 fonticon-wrap"1103 />1104 </div>1105 <label className="fonticon-classname">PhoneIncoming</label>1106 </Col>1107 <Col sm="6" md="4" className="fonticon-container">1108 <div className="fonticon-wrap">1109 <Icon.PhoneMissed size={32} className="mr-4 fonticon-wrap" />1110 </div>1111 <label className="fonticon-classname">PhoneMissed</label>1112 </Col>1113 <Col sm="6" md="4" className="fonticon-container">1114 <div className="fonticon-wrap">1115 <Icon.PhoneOff size={32} className="mr-4 fonticon-wrap" />1116 </div>1117 <label className="fonticon-classname">PhoneOff</label>1118 </Col>1119 <Col sm="6" md="4" className="fonticon-container">1120 <div className="fonticon-wrap">1121 <Icon.PhoneOutgoing1122 size={32}1123 className="mr-4 fonticon-wrap"1124 />1125 </div>1126 <label className="fonticon-classname">PhoneOutgoing</label>1127 </Col>1128 <Col sm="6" md="4" className="fonticon-container">1129 <div className="fonticon-wrap">1130 <Icon.Phone size={32} className="mr-4 fonticon-wrap" />1131 </div>1132 <label className="fonticon-classname">Phone</label>1133 </Col>1134 <Col sm="6" md="4" className="fonticon-container">1135 <div className="fonticon-wrap">1136 <Icon.PieChart size={32} className="mr-4 fonticon-wrap" />1137 </div>1138 <label className="fonticon-classname">PieChart</label>1139 </Col>1140 <Col sm="6" md="4" className="fonticon-container">1141 <div className="fonticon-wrap">1142 <Icon.PlayCircle size={32} className="mr-4 fonticon-wrap" />1143 </div>1144 <label className="fonticon-classname">PlayCircle</label>1145 </Col>1146 <Col sm="6" md="4" className="fonticon-container">1147 <div className="fonticon-wrap">1148 <Icon.Play size={32} className="mr-4 fonticon-wrap" />1149 </div>1150 <label className="fonticon-classname">Play</label>1151 </Col>1152 <Col sm="6" md="4" className="fonticon-container">1153 <div className="fonticon-wrap">1154 <Icon.PlusCircle size={32} className="mr-4 fonticon-wrap" />1155 </div>1156 <label className="fonticon-classname">PlusCircle</label>1157 </Col>1158 <Col sm="6" md="4" className="fonticon-container">1159 <div className="fonticon-wrap">1160 <Icon.PlusSquare size={32} className="mr-4 fonticon-wrap" />1161 </div>1162 <label className="fonticon-classname">PlusSquare</label>1163 </Col>1164 <Col sm="6" md="4" className="fonticon-container">1165 <div className="fonticon-wrap">1166 <Icon.Plus size={32} className="mr-4 fonticon-wrap" />1167 </div>1168 <label className="fonticon-classname">Plus</label>1169 </Col>1170 <Col sm="6" md="4" className="fonticon-container">1171 <div className="fonticon-wrap">1172 <Icon.Pocket size={32} className="mr-4 fonticon-wrap" />1173 </div>1174 <label className="fonticon-classname">Pocket</label>1175 </Col>1176 <Col sm="6" md="4" className="fonticon-container">1177 <div className="fonticon-wrap">1178 <Icon.Power size={32} className="mr-4 fonticon-wrap" />1179 </div>1180 <label className="fonticon-classname">Power</label>1181 </Col>1182 <Col sm="6" md="4" className="fonticon-container">1183 <div className="fonticon-wrap">1184 <Icon.Printer size={32} className="mr-4 fonticon-wrap" />1185 </div>1186 <label className="fonticon-classname">Printer</label>1187 </Col>1188 <Col sm="6" md="4" className="fonticon-container">1189 <div className="fonticon-wrap">1190 <Icon.Radio size={32} className="mr-4 fonticon-wrap" />1191 </div>1192 <label className="fonticon-classname">Radio</label>1193 </Col>1194 <Col sm="6" md="4" className="fonticon-container">1195 <div className="fonticon-wrap">1196 <Icon.RefreshCw size={32} className="mr-4 fonticon-wrap" />1197 </div>1198 <label className="fonticon-classname">RefreshCw</label>1199 </Col>1200 <Col sm="6" md="4" className="fonticon-container">1201 <div className="fonticon-wrap">1202 <Icon.Repeat size={32} className="mr-4 fonticon-wrap" />1203 </div>1204 <label className="fonticon-classname">Repeat</label>1205 </Col>1206 <Col sm="6" md="4" className="fonticon-container">1207 <div className="fonticon-wrap">1208 <Icon.Rewind size={32} className="mr-4 fonticon-wrap" />1209 </div>1210 <label className="fonticon-classname">Rewind</label>1211 </Col>1212 <Col sm="6" md="4" className="fonticon-container">1213 <div className="fonticon-wrap">1214 <Icon.RotateCcw size={32} className="mr-4 fonticon-wrap" />1215 </div>1216 <label className="fonticon-classname">RotateCcw</label>1217 </Col>1218 <Col sm="6" md="4" className="fonticon-container">1219 <div className="fonticon-wrap">1220 <Icon.RotateCw size={32} className="mr-4 fonticon-wrap" />1221 </div>1222 <label className="fonticon-classname">RotateCw</label>1223 </Col>1224 <Col sm="6" md="4" className="fonticon-container">1225 <div className="fonticon-wrap">1226 <Icon.Rss size={32} className="mr-4 fonticon-wrap" />1227 </div>1228 <label className="fonticon-classname">Rss</label>1229 </Col>1230 <Col sm="6" md="4" className="fonticon-container">1231 <div className="fonticon-wrap">1232 <Icon.Save size={32} className="mr-4 fonticon-wrap" />1233 </div>1234 <label className="fonticon-classname">Save</label>1235 </Col>1236 <Col sm="6" md="4" className="fonticon-container">1237 <div className="fonticon-wrap">1238 <Icon.Scissors size={32} className="mr-4 fonticon-wrap" />1239 </div>1240 <label className="fonticon-classname">Scissors</label>1241 </Col>1242 <Col sm="6" md="4" className="fonticon-container">1243 <div className="fonticon-wrap">1244 <Icon.Search size={32} className="mr-4 fonticon-wrap" />1245 </div>1246 <label className="fonticon-classname">Search</label>1247 </Col>1248 <Col sm="6" md="4" className="fonticon-container">1249 <div className="fonticon-wrap">1250 <Icon.Send size={32} className="mr-4 fonticon-wrap" />1251 </div>1252 <label className="fonticon-classname">Send</label>1253 </Col>1254 <Col sm="6" md="4" className="fonticon-container">1255 <div className="fonticon-wrap">1256 <Icon.Server size={32} className="mr-4 fonticon-wrap" />1257 </div>1258 <label className="fonticon-classname">Server</label>1259 </Col>1260 <Col sm="6" md="4" className="fonticon-container">1261 <div className="fonticon-wrap">1262 <Icon.Settings size={32} className="mr-4 fonticon-wrap" />1263 </div>1264 <label className="fonticon-classname">Settings</label>1265 </Col>1266 <Col sm="6" md="4" className="fonticon-container">1267 <div className="fonticon-wrap">1268 <Icon.Share2 size={32} className="mr-4 fonticon-wrap" />1269 </div>1270 <label className="fonticon-classname">Share2</label>1271 </Col>1272 <Col sm="6" md="4" className="fonticon-container">1273 <div className="fonticon-wrap">1274 <Icon.Share size={32} className="mr-4 fonticon-wrap" />1275 </div>1276 <label className="fonticon-classname">Share</label>1277 </Col>1278 <Col sm="6" md="4" className="fonticon-container">1279 <div className="fonticon-wrap">1280 <Icon.ShieldOff size={32} className="mr-4 fonticon-wrap" />1281 </div>1282 <label className="fonticon-classname">ShieldOff</label>1283 </Col>1284 <Col sm="6" md="4" className="fonticon-container">1285 <div className="fonticon-wrap">1286 <Icon.Shield size={32} className="mr-4 fonticon-wrap" />1287 </div>1288 <label className="fonticon-classname">Shield</label>1289 </Col>1290 <Col sm="6" md="4" className="fonticon-container">1291 <div className="fonticon-wrap">1292 <Icon.ShoppingBag size={32} className="mr-4 fonticon-wrap" />1293 </div>1294 <label className="fonticon-classname">ShoppingBag</label>1295 </Col>1296 <Col sm="6" md="4" className="fonticon-container">1297 <div className="fonticon-wrap">1298 <Icon.ShoppingCart size={32} className="mr-4 fonticon-wrap" />1299 </div>1300 <label className="fonticon-classname">ShoppingCart</label>1301 </Col>1302 <Col sm="6" md="4" className="fonticon-container">1303 <div className="fonticon-wrap">1304 <Icon.Shuffle size={32} className="mr-4 fonticon-wrap" />1305 </div>1306 <label className="fonticon-classname">Shuffle</label>1307 </Col>1308 <Col sm="6" md="4" className="fonticon-container">1309 <div className="fonticon-wrap">1310 <Icon.Sidebar size={32} className="mr-4 fonticon-wrap" />1311 </div>1312 <label className="fonticon-classname">Sidebar</label>1313 </Col>1314 <Col sm="6" md="4" className="fonticon-container">1315 <div className="fonticon-wrap">1316 <Icon.SkipBack size={32} className="mr-4 fonticon-wrap" />1317 </div>1318 <label className="fonticon-classname">SkipBack</label>1319 </Col>1320 <Col sm="6" md="4" className="fonticon-container">1321 <div className="fonticon-wrap">1322 <Icon.SkipForward size={32} className="mr-4 fonticon-wrap" />1323 </div>1324 <label className="fonticon-classname">SkipForward</label>1325 </Col>1326 <Col sm="6" md="4" className="fonticon-container">1327 <div className="fonticon-wrap">1328 <Icon.Slack size={32} className="mr-4 fonticon-wrap" />1329 </div>1330 <label className="fonticon-classname">Slack</label>1331 </Col>1332 <Col sm="6" md="4" className="fonticon-container">1333 <div className="fonticon-wrap">1334 <Icon.Slash size={32} className="mr-4 fonticon-wrap" />1335 </div>1336 <label className="fonticon-classname">Slash</label>1337 </Col>1338 <Col sm="6" md="4" className="fonticon-container">1339 <div className="fonticon-wrap">1340 <Icon.Sliders size={32} className="mr-4 fonticon-wrap" />1341 </div>1342 <label className="fonticon-classname">Sliders</label>1343 </Col>1344 <Col sm="6" md="4" className="fonticon-container">1345 <div className="fonticon-wrap">1346 <Icon.Smartphone size={32} className="mr-4 fonticon-wrap" />1347 </div>1348 <label className="fonticon-classname">Smartphone</label>1349 </Col>1350 <Col sm="6" md="4" className="fonticon-container">1351 <div className="fonticon-wrap">1352 <Icon.Speaker size={32} className="mr-4 fonticon-wrap" />1353 </div>1354 <label className="fonticon-classname">Speaker</label>1355 </Col>1356 <Col sm="6" md="4" className="fonticon-container">1357 <div className="fonticon-wrap">1358 <Icon.Square size={32} className="mr-4 fonticon-wrap" />1359 </div>1360 <label className="fonticon-classname">Square</label>1361 </Col>1362 <Col sm="6" md="4" className="fonticon-container">1363 <div className="fonticon-wrap">1364 <Icon.Star size={32} className="mr-4 fonticon-wrap" />1365 </div>1366 <label className="fonticon-classname">Star</label>1367 </Col>1368 <Col sm="6" md="4" className="fonticon-container">1369 <div className="fonticon-wrap">1370 <Icon.StopCircle size={32} className="mr-4 fonticon-wrap" />1371 </div>1372 <label className="fonticon-classname">StopCircle</label>1373 </Col>1374 <Col sm="6" md="4" className="fonticon-container">1375 <div className="fonticon-wrap">1376 <Icon.Sun size={32} className="mr-4 fonticon-wrap" />1377 </div>1378 <label className="fonticon-classname">Sun</label>1379 </Col>1380 <Col sm="6" md="4" className="fonticon-container">1381 <div className="fonticon-wrap">1382 <Icon.Sunrise size={32} className="mr-4 fonticon-wrap" />1383 </div>1384 <label className="fonticon-classname">Sunrise</label>1385 </Col>1386 <Col sm="6" md="4" className="fonticon-container">1387 <div className="fonticon-wrap">1388 <Icon.Sunset size={32} className="mr-4 fonticon-wrap" />1389 </div>1390 <label className="fonticon-classname">Sunset</label>1391 </Col>1392 <Col sm="6" md="4" className="fonticon-container">1393 <div className="fonticon-wrap">1394 <Icon.Tablet size={32} className="mr-4 fonticon-wrap" />1395 </div>1396 <label className="fonticon-classname">Tablet</label>1397 </Col>1398 <Col sm="6" md="4" className="fonticon-container">1399 <div className="fonticon-wrap">1400 <Icon.Tag size={32} className="mr-4 fonticon-wrap" />1401 </div>1402 <label className="fonticon-classname">Tag</label>1403 </Col>1404 <Col sm="6" md="4" className="fonticon-container">1405 <div className="fonticon-wrap">1406 <Icon.Target size={32} className="mr-4 fonticon-wrap" />1407 </div>1408 <label className="fonticon-classname">Target</label>1409 </Col>1410 <Col sm="6" md="4" className="fonticon-container">1411 <div className="fonticon-wrap">1412 <Icon.Terminal size={32} className="mr-4 fonticon-wrap" />1413 </div>1414 <label className="fonticon-classname">Terminal</label>1415 </Col>1416 <Col sm="6" md="4" className="fonticon-container">1417 <div className="fonticon-wrap">1418 <Icon.Thermometer size={32} className="mr-4 fonticon-wrap" />1419 </div>1420 <label className="fonticon-classname">Thermometer</label>1421 </Col>1422 <Col sm="6" md="4" className="fonticon-container">1423 <div className="fonticon-wrap">1424 <Icon.ThumbsDown size={32} className="mr-4 fonticon-wrap" />1425 </div>1426 <label className="fonticon-classname">ThumbsDown</label>1427 </Col>1428 <Col sm="6" md="4" className="fonticon-container">1429 <div className="fonticon-wrap">1430 <Icon.ThumbsUp size={32} className="mr-4 fonticon-wrap" />1431 </div>1432 <label className="fonticon-classname">ThumbsUp</label>1433 </Col>1434 <Col sm="6" md="4" className="fonticon-container">1435 <div className="fonticon-wrap">1436 <Icon.ToggleLeft size={32} className="mr-4 fonticon-wrap" />1437 </div>1438 <label className="fonticon-classname">ToggleLeft</label>1439 </Col>1440 <Col sm="6" md="4" className="fonticon-container">1441 <div className="fonticon-wrap">1442 <Icon.ToggleRight size={32} className="mr-4 fonticon-wrap" />1443 </div>1444 <label className="fonticon-classname">ToggleRight</label>1445 </Col>1446 <Col sm="6" md="4" className="fonticon-container">1447 <div className="fonticon-wrap">1448 <Icon.Trash2 size={32} className="mr-4 fonticon-wrap" />1449 </div>1450 <label className="fonticon-classname">Trash2</label>1451 </Col>1452 <Col sm="6" md="4" className="fonticon-container">1453 <div className="fonticon-wrap">1454 <Icon.Trash size={32} className="mr-4 fonticon-wrap" />1455 </div>1456 <label className="fonticon-classname">Trash</label>1457 </Col>1458 <Col sm="6" md="4" className="fonticon-container">1459 <div className="fonticon-wrap">1460 <Icon.TrendingDown size={32} className="mr-4 fonticon-wrap" />1461 </div>1462 <label className="fonticon-classname">TrendingDown</label>1463 </Col>1464 <Col sm="6" md="4" className="fonticon-container">1465 <div className="fonticon-wrap">1466 <Icon.TrendingUp size={32} className="mr-4 fonticon-wrap" />1467 </div>1468 <label className="fonticon-classname">TrendingUp</label>1469 </Col>1470 <Col sm="6" md="4" className="fonticon-container">1471 <div className="fonticon-wrap">1472 <Icon.Triangle size={32} className="mr-4 fonticon-wrap" />1473 </div>1474 <label className="fonticon-classname">Triangle</label>1475 </Col>1476 <Col sm="6" md="4" className="fonticon-container">1477 <div className="fonticon-wrap">1478 <Icon.Truck size={32} className="mr-4 fonticon-wrap" />1479 </div>1480 <label className="fonticon-classname">Truck</label>1481 </Col>1482 <Col sm="6" md="4" className="fonticon-container">1483 <div className="fonticon-wrap">1484 <Icon.Tv size={32} className="mr-4 fonticon-wrap" />1485 </div>1486 <label className="fonticon-classname">Tv</label>1487 </Col>1488 <Col sm="6" md="4" className="fonticon-container">1489 <div className="fonticon-wrap">1490 <Icon.Twitter size={32} className="mr-4 fonticon-wrap" />1491 </div>1492 <label className="fonticon-classname">Twitter</label>1493 </Col>1494 <Col sm="6" md="4" className="fonticon-container">1495 <div className="fonticon-wrap">1496 <Icon.Type size={32} className="mr-4 fonticon-wrap" />1497 </div>1498 <label className="fonticon-classname">Type</label>1499 </Col>1500 <Col sm="6" md="4" className="fonticon-container">1501 <div className="fonticon-wrap">1502 <Icon.Umbrella size={32} className="mr-4 fonticon-wrap" />1503 </div>1504 <label className="fonticon-classname">Umbrella</label>1505 </Col>1506 <Col sm="6" md="4" className="fonticon-container">1507 <div className="fonticon-wrap">1508 <Icon.Underline size={32} className="mr-4 fonticon-wrap" />1509 </div>1510 <label className="fonticon-classname">Underline</label>1511 </Col>1512 <Col sm="6" md="4" className="fonticon-container">1513 <div className="fonticon-wrap">1514 <Icon.Unlock size={32} className="mr-4 fonticon-wrap" />1515 </div>1516 <label className="fonticon-classname">Unlock</label>1517 </Col>1518 <Col sm="6" md="4" className="fonticon-container">1519 <div className="fonticon-wrap">1520 <Icon.UploadCloud size={32} className="mr-4 fonticon-wrap" />1521 </div>1522 <label className="fonticon-classname">UploadCloud</label>1523 </Col>1524 <Col sm="6" md="4" className="fonticon-container">1525 <div className="fonticon-wrap">1526 <Icon.Upload size={32} className="mr-4 fonticon-wrap" />1527 </div>1528 <label className="fonticon-classname">Upload</label>1529 </Col>1530 <Col sm="6" md="4" className="fonticon-container">1531 <div className="fonticon-wrap">1532 <Icon.UserCheck size={32} className="mr-4 fonticon-wrap" />1533 </div>1534 <label className="fonticon-classname">UserCheck</label>1535 </Col>1536 <Col sm="6" md="4" className="fonticon-container">1537 <div className="fonticon-wrap">1538 <Icon.UserMinus size={32} className="mr-4 fonticon-wrap" />1539 </div>1540 <label className="fonticon-classname">UserMinus</label>1541 </Col>1542 <Col sm="6" md="4" className="fonticon-container">1543 <div className="fonticon-wrap">1544 <Icon.UserPlus size={32} className="mr-4 fonticon-wrap" />1545 </div>1546 <label className="fonticon-classname">UserPlus</label>1547 </Col>1548 <Col sm="6" md="4" className="fonticon-container">1549 <div className="fonticon-wrap">1550 <Icon.UserX size={32} className="mr-4 fonticon-wrap" />1551 </div>1552 <label className="fonticon-classname">UserX</label>1553 </Col>1554 <Col sm="6" md="4" className="fonticon-container">1555 <div className="fonticon-wrap">1556 <Icon.User size={32} className="mr-4 fonticon-wrap" />1557 </div>1558 <label className="fonticon-classname">User</label>1559 </Col>1560 <Col sm="6" md="4" className="fonticon-container">1561 <div className="fonticon-wrap">1562 <Icon.Users size={32} className="mr-4 fonticon-wrap" />1563 </div>1564 <label className="fonticon-classname">Users</label>1565 </Col>1566 <Col sm="6" md="4" className="fonticon-container">1567 <div className="fonticon-wrap">1568 <Icon.VideoOff size={32} className="mr-4 fonticon-wrap" />1569 </div>1570 <label className="fonticon-classname">VideoOff</label>1571 </Col>1572 <Col sm="6" md="4" className="fonticon-container">1573 <div className="fonticon-wrap">1574 <Icon.Video size={32} className="mr-4 fonticon-wrap" />1575 </div>1576 <label className="fonticon-classname">Video</label>1577 </Col>1578 <Col sm="6" md="4" className="fonticon-container">1579 <div className="fonticon-wrap">1580 <Icon.Voicemail size={32} className="mr-4 fonticon-wrap" />1581 </div>1582 <label className="fonticon-classname">Voicemail</label>1583 </Col>1584 <Col sm="6" md="4" className="fonticon-container">1585 <div className="fonticon-wrap">1586 <Icon.Volume1 size={32} className="mr-4 fonticon-wrap" />1587 </div>1588 <label className="fonticon-classname">Volume1</label>1589 </Col>1590 <Col sm="6" md="4" className="fonticon-container">1591 <div className="fonticon-wrap">1592 <Icon.Volume2 size={32} className="mr-4 fonticon-wrap" />1593 </div>1594 <label className="fonticon-classname">Volume2</label>1595 </Col>1596 <Col sm="6" md="4" className="fonticon-container">1597 <div className="fonticon-wrap">1598 <Icon.VolumeX size={32} className="mr-4 fonticon-wrap" />1599 </div>1600 <label className="fonticon-classname">VolumeX</label>1601 </Col>1602 <Col sm="6" md="4" className="fonticon-container">1603 <div className="fonticon-wrap">1604 <Icon.Volume size={32} className="mr-4 fonticon-wrap" />1605 </div>1606 <label className="fonticon-classname">Volume</label>1607 </Col>1608 <Col sm="6" md="4" className="fonticon-container">1609 <div className="fonticon-wrap">1610 <Icon.Watch size={32} className="mr-4 fonticon-wrap" />1611 </div>1612 <label className="fonticon-classname">Watch</label>1613 </Col>1614 <Col sm="6" md="4" className="fonticon-container">1615 <div className="fonticon-wrap">1616 <Icon.WifiOff size={32} className="mr-4 fonticon-wrap" />1617 </div>1618 <label className="fonticon-classname">WifiOff</label>1619 </Col>1620 <Col sm="6" md="4" className="fonticon-container">1621 <div className="fonticon-wrap">1622 <Icon.Wifi size={32} className="mr-4 fonticon-wrap" />1623 </div>1624 <label className="fonticon-classname">Wifi</label>1625 </Col>1626 <Col sm="6" md="4" className="fonticon-container">1627 <div className="fonticon-wrap">1628 <Icon.Wind size={32} className="mr-4 fonticon-wrap" />1629 </div>1630 <label className="fonticon-classname">Wind</label>1631 </Col>1632 <Col sm="6" md="4" className="fonticon-container">1633 <div className="fonticon-wrap">1634 <Icon.XCircle size={32} className="mr-4 fonticon-wrap" />1635 </div>1636 <label className="fonticon-classname">XCircle</label>1637 </Col>1638 <Col sm="6" md="4" className="fonticon-container">1639 <div className="fonticon-wrap">1640 <Icon.XSquare size={32} className="mr-4 fonticon-wrap" />1641 </div>1642 <label className="fonticon-classname">XSquare</label>1643 </Col>1644 <Col sm="6" md="4" className="fonticon-container">1645 <div className="fonticon-wrap">1646 <Icon.X size={32} className="mr-4 fonticon-wrap" />1647 </div>1648 <label className="fonticon-classname">X</label>1649 </Col>1650 <Col sm="6" md="4" className="fonticon-container">1651 <div className="fonticon-wrap">1652 <Icon.Youtube size={32} className="mr-4 fonticon-wrap" />1653 </div>1654 <label className="fonticon-classname">Youtube</label>1655 </Col>1656 <Col sm="6" md="4" className="fonticon-container">1657 <div className="fonticon-wrap">1658 <Icon.ZapOff size={32} className="mr-4 fonticon-wrap" />1659 </div>1660 <label className="fonticon-classname">ZapOff</label>1661 </Col>1662 <Col sm="6" md="4" className="fonticon-container">1663 <div className="fonticon-wrap">1664 <Icon.Zap size={32} className="mr-4 fonticon-wrap" />1665 </div>1666 <label className="fonticon-classname">Zap</label>1667 </Col>1668 <Col sm="6" md="4" className="fonticon-container">1669 <div className="fonticon-wrap">1670 <Icon.ZoomIn size={32} className="mr-4 fonticon-wrap" />1671 </div>1672 <label className="fonticon-classname">ZoomIn</label>1673 </Col>1674 <Col sm="6" md="4" className="fonticon-container">1675 <div className="fonticon-wrap">1676 <Icon.ZoomOut size={32} className="mr-4 fonticon-wrap" />1677 </div>1678 <label className="fonticon-classname">ZoomOut</label>1679 </Col>1680 </Row>1681 </CardBody>1682 </Card>1683 </React.Fragment>1684 )1685 }1686}...
default.js
Source:default.js
1const Core = MiniRefreshTools.Core;2const version = MiniRefreshTools.version;3const extend = MiniRefreshTools.extend;4const namespace = MiniRefreshTools.namespace;5/**6 * ä¸äºé»è®¤æä¾çCSSç±»ï¼ä¸è¬æ¥è¯´ä¸ä¼åå¨ï¼ç±æ¡æ¶æä¾çï¼7 * THEME å段ä¼æ ¹æ®ä¸åç主é¢æä¸åå¼8 * å¨ä½¿ç¨bodyçscrollæ¶ï¼éè¦å ä¸æ ·å¼ CLASS_BODY_SCROLL_WRAP9 */10const CLASS_THEME = 'minirefresh-theme-default';11const CLASS_DOWN_WRAP = 'minirefresh-downwrap';12const CLASS_UP_WRAP = 'minirefresh-upwrap';13const CLASS_FADE_IN = 'minirefresh-fade-in';14const CLASS_FADE_OUT = 'minirefresh-fade-out';15const CLASS_TO_TOP = 'minirefresh-totop';16const CLASS_ROTATE = 'minirefresh-rotate';17const CLASS_HARDWARE_SPEEDUP = 'minirefresh-hardware-speedup';18const CLASS_HIDDEN = 'minirefresh-hidden';19const CLASS_BODY_SCROLL_WRAP = 'body-scroll-wrap';20/**21 * æ¬ä¸»é¢çç¹è²æ ·å¼22 */23const CLASS_DOWN_SUCCESS = 'downwrap-success';24const CLASS_DOWN_ERROR = 'downwrap-error';25const CLASS_STATUS_DEFAULT = 'status-default';26const CLASS_STATUS_PULL = 'status-pull';27const CLASS_STATUS_LOADING = 'status-loading';28const CLASS_STATUS_SUCCESS = 'status-success';29const CLASS_STATUS_ERROR = 'status-error';30const CLASS_STATUS_NOMORE = 'status-nomore';31/**32 * ä¸äºå¸¸é33 */34const DEFAULT_DOWN_HEIGHT = 75;35const defaultSetting = {36 down: {37 successAnim: {38 // ä¸æå·æ°ç»æåæ¯å¦ææåå¨ç»ï¼é»è®¤ä¸ºfalseï¼å¦ææ³è¦ææåå·æ°xxxæ¡æ°æ®è¿ç§æä½ï¼è¯·è®¾ä¸ºtrueï¼å¹¶å®ç°å¯¹åºhookå½æ°39 isEnable: false,40 duration: 300,41 },42 // å¯éï¼å¨ä¸æå¯å·æ°ç¶ææ¶ï¼ä¸æå·æ°æ§ä»¶ä¸æ¾ç¤ºçæ é¢å
容43 contentdown: 'ä¸æå·æ°',44 // å¯éï¼å¨éæ¾å¯å·æ°ç¶ææ¶ï¼ä¸æå·æ°æ§ä»¶ä¸æ¾ç¤ºçæ é¢å
容45 contentover: 'éæ¾å·æ°',46 // å¯éï¼æ£å¨å·æ°ç¶ææ¶ï¼ä¸æå·æ°æ§ä»¶ä¸æ¾ç¤ºçæ é¢å
容47 contentrefresh: 'å è½½ä¸...',48 // å¯éï¼å·æ°æåçæ示ï¼å½å¼å¯successAnimæ¶æææ49 contentsuccess: 'å·æ°æå',50 // å¯éï¼å·æ°å¤±è´¥çæ示ï¼é误åè°ç¨å°ï¼å½å¼å¯successAnimæ¶æææ51 contenterror: 'å·æ°å¤±è´¥',52 // æ¯å¦é»è®¤è·éè¿è¡csså¨ç»53 isWrapCssTranslate: false,54 },55 up: {56 toTop: {57 // æ¯å¦å¼å¯ç¹å»åå°é¡¶é¨58 isEnable: true,59 duration: 300,60 // æ»å¨å¤å°è·ç¦»ææ¾ç¤ºtoTop61 offset: 800,62 },63 // é»è®¤ä¸ºç©ºï¼å¯ä»¥èªè¡æ¹ä¸º ä¸ææ¾ç¤ºæ´å¤ ç64 contentdown: '',65 contentrefresh: 'å è½½ä¸...',66 contentnomore: '没ææ´å¤æ°æ®äº',67 },68};69class MiniRefreshTheme extends Core {70 /**71 * æé ï¼ä½¿ç¨æ°çé»è®¤åæ°72 * @param {Object} options é
置信æ¯73 * @constructor74 */75 constructor(options) {76 const newOptions = extend(true, {}, defaultSetting, options);77 super(newOptions);78 }79 _initHook() {80 const container = this.container;81 const contentWrap = this.contentWrap;82 container.classList.add(CLASS_THEME);83 // å ä¸ç¡¬ä»¶å é让å¨ç»æ´æµç
84 contentWrap.classList.add(CLASS_HARDWARE_SPEEDUP);85 if (this.options.isUseBodyScroll) {86 // å¦æ使ç¨äºbodyçscrollï¼éè¦å¢å 对åºçæ ·å¼ï¼å¦åé»è®¤çabsoluteæ æ³è¢«çå¬å°87 container.classList.add(CLASS_BODY_SCROLL_WRAP);88 contentWrap.classList.add(CLASS_BODY_SCROLL_WRAP);89 }90 this._initDownWrap();91 this._initUpWrap();92 this._initToTop();93 }94 /**95 * å·æ°çå®ç°ï¼éè¦æ ¹æ®æ°é
ç½®è¿è¡ä¸äºæ´æ¹96 */97 _refreshHook() {98 // å¦æå¼å
³csstranslateï¼éè¦å
¼å®¹99 if (this.options.down.isWrapCssTranslate) {100 this._transformDownWrap(-this.downWrapHeight);101 } else {102 this._transformDownWrap(0, 0, true);103 }104 // toTopçæ¾å½±æ§å¶ï¼å¦ææ¬èº«æ¾ç¤ºäºï¼åæ´æ°ä¸ºéèï¼éè¦é©¬ä¸éè105 if (!this.options.up.toTop.isEnable) {106 this.toTopBtn && this.toTopBtn.classList.add(CLASS_HIDDEN);107 this.isShowToTopBtn = false;108 }109 }110 static _changeWrapStatusClass(wrap, statusClass) {111 wrap.classList.remove(CLASS_STATUS_NOMORE);112 wrap.classList.remove(CLASS_STATUS_DEFAULT);113 wrap.classList.remove(CLASS_STATUS_PULL);114 wrap.classList.remove(CLASS_STATUS_LOADING);115 wrap.classList.remove(CLASS_STATUS_SUCCESS);116 wrap.classList.remove(CLASS_STATUS_ERROR);117 wrap.classList.add(statusClass);118 }119 _initDownWrap() {120 const container = this.container;121 const contentWrap = this.contentWrap;122 const options = this.options;123 // ä¸æçåºå124 const downWrap = document.createElement('div');125 downWrap.className = `${CLASS_DOWN_WRAP} ${CLASS_HARDWARE_SPEEDUP}`;126 downWrap.innerHTML = ` 127 <div class="downwrap-content">128 <p class="downwrap-progress"></p>129 <p class="downwrap-tips">${options.down.contentdown}</p>130 </div>131 `;132 container.insertBefore(downWrap, contentWrap);133 this.downWrap = downWrap;134 this.downWrapProgress = this.downWrap.querySelector('.downwrap-progress');135 this.downWrapTips = this.downWrap.querySelector('.downwrap-tips');136 // æ¯å¦è½ä¸æçåéï¼æ§å¶pullæ¶çç¶æ转å137 this.isCanPullDown = false;138 this.downWrapHeight = downWrap.offsetHeight || DEFAULT_DOWN_HEIGHT;139 this._transformDownWrap(-this.downWrapHeight);140 MiniRefreshTheme._changeWrapStatusClass(this.downWrap, CLASS_STATUS_DEFAULT);141 }142 _transformDownWrap(offset = 0, duration = 0, isForce) {143 if (!isForce && !this.options.down.isWrapCssTranslate) {144 // åªæå
³éäºisWrapCssTranslateï¼ä¹å¯ä»¥éè¿isForceåæ°å¼ºå¶ç§»å¨145 return;146 }147 const duratuinStr = `${duration}ms`;148 const transformStr = `translateY(${offset}px) translateZ(0px)`;149 // è®°å¾å¨ç»æ¶ translateZ å¦å硬件å éä¼è¢«è¦ç150 this.downWrap.style.webkitTransitionDuration = duratuinStr;151 this.downWrap.style.transitionDuration = duratuinStr;152 this.downWrap.style.webkitTransform = transformStr;153 this.downWrap.style.transform = transformStr;154 }155 _initUpWrap() {156 const contentWrap = this.contentWrap;157 const options = this.options;158 // ä¸æåºå159 const upWrap = document.createElement('div');160 upWrap.className = `${CLASS_UP_WRAP} ${CLASS_HARDWARE_SPEEDUP}`;161 upWrap.innerHTML = ` 162 <p class="upwrap-progress"></p>163 <p class="upwrap-tips">${options.up.contentdown}</p>164 `;165 upWrap.style.visibility = 'hidden';166 // å å°containerä¸167 contentWrap.appendChild(upWrap);168 this.upWrap = upWrap;169 this.upWrapProgress = this.upWrap.querySelector('.upwrap-progress');170 this.upWrapTips = this.upWrap.querySelector('.upwrap-tips');171 MiniRefreshTheme._changeWrapStatusClass(this.upWrap, CLASS_STATUS_DEFAULT);172 }173 /**174 * èªå®ä¹å®ç°ä¸ä¸ªtoTopï¼ç±äºè¿ä¸ªæ¯å±äºé¢å¤çäºä»¶æ以没ææ·»å çæ ¸å¿ä¸ï¼èæ¯ç±åèªç主é¢å³å®æ¯å¦å®ç°æè
å®ç°æä»ä¹æ ·å175 * ä¸è¿æ¡æ¶ä¸ä»ç¶æä¾äºä¸ä¸ªé»è®¤çminirefresh-totopæ ·å¼ï¼å¯ä»¥æ¹ä¾¿ä½¿ç¨176 */177 _initToTop() {178 const options = this.options;179 const toTop = options.up.toTop.isEnable;180 const duration = options.up.toTop.duration;181 if (toTop) {182 const toTopBtn = document.createElement('div');183 toTopBtn.className = `${CLASS_TO_TOP} ${CLASS_THEME}`;184 toTopBtn.onclick = () => {185 this.scroller.scrollTo(0, duration);186 };187 toTopBtn.classList.add(CLASS_HIDDEN);188 this.toTopBtn = toTopBtn;189 this.isShowToTopBtn = false;190 // é»è®¤æ·»å å°bodyä¸é²æ¢å²çª191 // éè¦æ·»å å°containerï¼å¦åå¤ä¸ªtotopæ æ³è¯å«192 this.container.appendChild(toTopBtn);193 }194 }195 _pullHook(downHight, downOffset) {196 const options = this.options;197 const FULL_DEGREE = 360;198 if (downHight < downOffset) {199 if (this.isCanPullDown) {200 this.isCanPullDown = false;201 MiniRefreshTheme._changeWrapStatusClass(this.downWrap, CLASS_STATUS_DEFAULT);202 this.downWrapTips.innerText = options.down.contentdown;203 }204 } else if (!this.isCanPullDown) {205 this.downWrapTips.innerText = options.down.contentover;206 this.isCanPullDown = true;207 MiniRefreshTheme._changeWrapStatusClass(this.downWrap, CLASS_STATUS_PULL);208 }209 if (this.downWrapProgress) {210 const rate = downHight / downOffset;211 const progress = FULL_DEGREE * rate;212 const rotateStr = `rotate(${progress}deg)`;213 this.downWrapProgress.style.webkitTransform = rotateStr;214 this.downWrapProgress.style.transform = rotateStr;215 }216 this._transformDownWrap(-this.downWrapHeight + downHight);217 }218 _scrollHook(scrollTop) {219 // ç¨æ¥å¤ætoTop220 const options = this.options;221 const toTop = options.up.toTop.isEnable;222 const toTopBtn = this.toTopBtn;223 if (toTop && toTopBtn) {224 if (scrollTop >= options.up.toTop.offset) {225 if (!this.isShowToTopBtn) {226 toTopBtn.classList.remove(CLASS_FADE_OUT);227 toTopBtn.classList.remove(CLASS_HIDDEN);228 toTopBtn.classList.add(CLASS_FADE_IN);229 this.isShowToTopBtn = true;230 }231 } else if (this.isShowToTopBtn) {232 toTopBtn.classList.add(CLASS_FADE_OUT);233 toTopBtn.classList.remove(CLASS_FADE_IN);234 this.isShowToTopBtn = false;235 }236 }237 }238 _downLoaingHook() {239 // é»è®¤åcontentWrapçåæ¥240 this._transformDownWrap(-this.downWrapHeight + this.options.down.offset,241 this.options.down.bounceTime);242 this.downWrapTips.innerText = this.options.down.contentrefresh;243 this.downWrapProgress.classList.add(CLASS_ROTATE);244 MiniRefreshTheme._changeWrapStatusClass(this.downWrap, CLASS_STATUS_LOADING);245 }246 _downLoaingSuccessHook(isSuccess, successTips) {247 this.options.down.contentsuccess = successTips || this.options.down.contentsuccess;248 this.downWrapTips.innerText = isSuccess ?249 this.options.down.contentsuccess :250 this.options.down.contenterror;251 this.downWrapProgress.classList.remove(CLASS_ROTATE);252 this.downWrapProgress.classList.add(CLASS_FADE_OUT);253 this.downWrapProgress.classList.add(isSuccess ? CLASS_DOWN_SUCCESS : CLASS_DOWN_ERROR);254 MiniRefreshTheme._changeWrapStatusClass(255 this.downWrap,256 isSuccess ? CLASS_STATUS_SUCCESS : CLASS_STATUS_ERROR);257 }258 _downLoaingEndHook(isSuccess) {259 this.downWrapTips.innerText = this.options.down.contentdown;260 this.downWrapProgress.classList.remove(CLASS_ROTATE);261 this.downWrapProgress.classList.remove(CLASS_FADE_OUT);262 this.downWrapProgress.classList.remove(isSuccess ? CLASS_DOWN_SUCCESS : CLASS_DOWN_ERROR);263 // é»è®¤ä¸ºä¸å¯è§264 // éè¦éç½®åæ¥265 this.isCanPullDown = false;266 this._transformDownWrap(-this.downWrapHeight, this.options.down.bounceTime);267 MiniRefreshTheme._changeWrapStatusClass(this.downWrap, CLASS_STATUS_DEFAULT);268 }269 _cancelLoaingHook() {270 this._transformDownWrap(-this.downWrapHeight, this.options.down.bounceTime);271 MiniRefreshTheme._changeWrapStatusClass(this.downWrap, CLASS_STATUS_DEFAULT);272 }273 _upLoaingHook(isShowUpLoading) {274 if (isShowUpLoading) {275 this.upWrapTips.innerText = this.options.up.contentrefresh;276 this.upWrapProgress.classList.add(CLASS_ROTATE);277 this.upWrapProgress.classList.remove(CLASS_HIDDEN);278 this.upWrap.style.visibility = 'visible';279 } else {280 this.upWrap.style.visibility = 'hidden';281 }282 MiniRefreshTheme._changeWrapStatusClass(this.upWrap, CLASS_STATUS_LOADING);283 }284 _upLoaingEndHook(isFinishUp) {285 if (!isFinishUp) {286 // æ¥ä¸æ¥è¿å¯ä»¥å è½½æ´å¤287 // this.upWrap.style.visibility = 'hidden';288 this.upWrapTips.innerText = this.options.up.contentdown;289 MiniRefreshTheme._changeWrapStatusClass(this.upWrap, CLASS_STATUS_DEFAULT);290 } else {291 // å·²ç»æ²¡ææ´å¤æ°æ®äº292 // this.upWrap.style.visibility = 'visible';293 this.upWrapTips.innerText = this.options.up.contentnomore;294 MiniRefreshTheme._changeWrapStatusClass(this.upWrap, CLASS_STATUS_NOMORE);295 }296 this.upWrapProgress.classList.remove(CLASS_ROTATE);297 this.upWrapProgress.classList.add(CLASS_HIDDEN);298 }299 _resetUpLoadingHook() {300 // this.upWrap.style.visibility = 'hidden';301 this.upWrapTips.innerText = this.options.up.contentdown;302 this.upWrapProgress.classList.remove(CLASS_ROTATE);303 this.upWrapProgress.classList.add(CLASS_HIDDEN);304 MiniRefreshTheme._changeWrapStatusClass(this.upWrap, CLASS_STATUS_DEFAULT);305 }306 _lockUpLoadingHook(isLock) {307 this.upWrap.style.visibility = isLock ? 'hidden' : 'visible';308 }309 _lockDownLoadingHook(isLock) {310 this.downWrap.style.visibility = isLock ? 'hidden' : 'visible';311 }312}313MiniRefreshTheme.sign = 'default';314MiniRefreshTheme.version = version;315namespace('theme.defaults', MiniRefreshTheme);316// è¦çå
¨å±åé317window.MiniRefresh = MiniRefreshTheme;...
main.js
Source:main.js
...26 moveY: 027 };28 },29 computed: {30 wrap() {31 return this.$refs.wrap;32 }33 },34 render(h) {35 let gutter = scrollbarWidth();36 let style = this.wrapStyle;37 if (gutter) {38 const gutterWith = `-${gutter}px`;39 const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;40 if (Array.isArray(this.wrapStyle)) {41 style = toObject(this.wrapStyle);42 style.marginRight = style.marginBottom = gutterWith;43 } else if (typeof this.wrapStyle === 'string') {44 style += gutterStyle;...
getMarkupWrap.js
Source:getMarkupWrap.js
1/**2 * Copyright 2013-2015, Facebook, Inc.3 * All rights reserved.4 *5 * This source code is licensed under the BSD-style license found in the6 * LICENSE file in the root directory of this source tree. An additional grant7 * of patent rights can be found in the PATENTS file in the same directory.8 *9 * @providesModule getMarkupWrap10 */11var ExecutionEnvironment = require('ExecutionEnvironment');12var invariant = require('invariant');13/**14 * Dummy container used to detect which wraps are necessary.15 */16var dummyNode =17 ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;18/**19 * Some browsers cannot use `innerHTML` to render certain elements standalone,20 * so we wrap them, render the wrapped nodes, then extract the desired node.21 *22 * In IE8, certain elements cannot render alone, so wrap all elements ('*').23 */24var shouldWrap = {25 // Force wrapping for SVG elements because if they get created inside a <div>,26 // they will be initialized in the wrong namespace (and will not display).27 'circle': true,28 'clipPath': true,29 'defs': true,30 'ellipse': true,31 'g': true,32 'line': true,33 'linearGradient': true,34 'path': true,35 'polygon': true,36 'polyline': true,37 'radialGradient': true,38 'rect': true,39 'stop': true,40 'text': true41};42var selectWrap = [1, '<select multiple="true">', '</select>'];43var tableWrap = [1, '<table>', '</table>'];44var trWrap = [3, '<table><tbody><tr>', '</tr></tbody></table>'];45var svgWrap = [1, '<svg>', '</svg>'];46var markupWrap = {47 '*': [1, '?<div>', '</div>'],48 'area': [1, '<map>', '</map>'],49 'col': [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],50 'legend': [1, '<fieldset>', '</fieldset>'],51 'param': [1, '<object>', '</object>'],52 'tr': [2, '<table><tbody>', '</tbody></table>'],53 'optgroup': selectWrap,54 'option': selectWrap,55 'caption': tableWrap,56 'colgroup': tableWrap,57 'tbody': tableWrap,58 'tfoot': tableWrap,59 'thead': tableWrap,60 'td': trWrap,61 'th': trWrap,62 'circle': svgWrap,63 'clipPath': svgWrap,64 'defs': svgWrap,65 'ellipse': svgWrap,66 'g': svgWrap,67 'line': svgWrap,68 'linearGradient': svgWrap,69 'path': svgWrap,70 'polygon': svgWrap,71 'polyline': svgWrap,72 'radialGradient': svgWrap,73 'rect': svgWrap,74 'stop': svgWrap,75 'text': svgWrap76};77/**78 * Gets the markup wrap configuration for the supplied `nodeName`.79 *80 * NOTE: This lazily detects which wraps are necessary for the current browser.81 *82 * @param {string} nodeName Lowercase `nodeName`.83 * @return {?array} Markup wrap configuration, if applicable.84 */85function getMarkupWrap(nodeName) {86 invariant(!!dummyNode, 'Markup wrapping node not initialized');87 if (!markupWrap.hasOwnProperty(nodeName)) {88 nodeName = '*';89 }90 if (!shouldWrap.hasOwnProperty(nodeName)) {91 if (nodeName === '*') {92 dummyNode.innerHTML = '<link />';93 } else {94 dummyNode.innerHTML = '<' + nodeName + '></' + nodeName + '>';95 }96 shouldWrap[nodeName] = !dummyNode.firstChild;97 }98 return shouldWrap[nodeName] ? markupWrap[nodeName] : null;99}...
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run green automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
