vue-devui 1.0.0-beta.2 → 1.0.0-beta.220808

package/grid/style.css

@@ -0,0 +1 @@
+.devui-row{display:flex}.devui-row__wrap{flex-wrap:wrap}.devui-row__align--top{align-items:flex-start}.devui-row__align--middle{align-items:center}.devui-row__align--bottom{align-items:flex-end}.devui-row__justify--start{justify-content:flex-start}.devui-row__justify--center{justify-content:center}.devui-row__justify--end{justify-content:flex-end}.devui-row__justify--around{justify-content:space-around}.devui-row__justify--between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col__span--0,.devui-col__xs--span-0{display:none}.devui-col__offset--1{margin-left:4.1666666667%}.devui-col__pull--1{right:4.1666666667%}.devui-col__push--1{left:4.1666666667%}.devui-col__span--1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xs--offset-1{margin-left:4.1666666667%}.devui-col__xs--pull-1{right:4.1666666667%}.devui-col__xs--push-1{left:4.1666666667%}.devui-col__xs--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__offset--2{margin-left:8.3333333333%}.devui-col__pull--2{right:8.3333333333%}.devui-col__push--2{left:8.3333333333%}.devui-col__span--2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xs--offset-2{margin-left:8.3333333333%}.devui-col__xs--pull-2{right:8.3333333333%}.devui-col__xs--push-2{left:8.3333333333%}.devui-col__xs--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__offset--3{margin-left:12.5%}.devui-col__pull--3{right:12.5%}.devui-col__push--3{left:12.5%}.devui-col__span--3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xs--offset-3{margin-left:12.5%}.devui-col__xs--pull-3{right:12.5%}.devui-col__xs--push-3{left:12.5%}.devui-col__xs--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__offset--4{margin-left:16.6666666667%}.devui-col__pull--4{right:16.6666666667%}.devui-col__push--4{left:16.6666666667%}.devui-col__span--4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xs--offset-4{margin-left:16.6666666667%}.devui-col__xs--pull-4{right:16.6666666667%}.devui-col__xs--push-4{left:16.6666666667%}.devui-col__xs--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__offset--5{margin-left:20.8333333333%}.devui-col__pull--5{right:20.8333333333%}.devui-col__push--5{left:20.8333333333%}.devui-col__span--5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xs--offset-5{margin-left:20.8333333333%}.devui-col__xs--pull-5{right:20.8333333333%}.devui-col__xs--push-5{left:20.8333333333%}.devui-col__xs--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__offset--6{margin-left:25%}.devui-col__pull--6{right:25%}.devui-col__push--6{left:25%}.devui-col__span--6{display:block;flex:0 0 25%;width:25%}.devui-col__xs--offset-6{margin-left:25%}.devui-col__xs--pull-6{right:25%}.devui-col__xs--push-6{left:25%}.devui-col__xs--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__offset--7{margin-left:29.1666666667%}.devui-col__pull--7{right:29.1666666667%}.devui-col__push--7{left:29.1666666667%}.devui-col__span--7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xs--offset-7{margin-left:29.1666666667%}.devui-col__xs--pull-7{right:29.1666666667%}.devui-col__xs--push-7{left:29.1666666667%}.devui-col__xs--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__offset--8{margin-left:33.3333333333%}.devui-col__pull--8{right:33.3333333333%}.devui-col__push--8{left:33.3333333333%}.devui-col__span--8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xs--offset-8{margin-left:33.3333333333%}.devui-col__xs--pull-8{right:33.3333333333%}.devui-col__xs--push-8{left:33.3333333333%}.devui-col__xs--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__offset--9{margin-left:37.5%}.devui-col__pull--9{right:37.5%}.devui-col__push--9{left:37.5%}.devui-col__span--9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xs--offset-9{margin-left:37.5%}.devui-col__xs--pull-9{right:37.5%}.devui-col__xs--push-9{left:37.5%}.devui-col__xs--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__offset--10{margin-left:41.6666666667%}.devui-col__pull--10{right:41.6666666667%}.devui-col__push--10{left:41.6666666667%}.devui-col__span--10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xs--offset-10{margin-left:41.6666666667%}.devui-col__xs--pull-10{right:41.6666666667%}.devui-col__xs--push-10{left:41.6666666667%}.devui-col__xs--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__offset--11{margin-left:45.8333333333%}.devui-col__pull--11{right:45.8333333333%}.devui-col__push--11{left:45.8333333333%}.devui-col__span--11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xs--offset-11{margin-left:45.8333333333%}.devui-col__xs--pull-11{right:45.8333333333%}.devui-col__xs--push-11{left:45.8333333333%}.devui-col__xs--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__offset--12{margin-left:50%}.devui-col__pull--12{right:50%}.devui-col__push--12{left:50%}.devui-col__span--12{display:block;flex:0 0 50%;width:50%}.devui-col__xs--offset-12{margin-left:50%}.devui-col__xs--pull-12{right:50%}.devui-col__xs--push-12{left:50%}.devui-col__xs--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__offset--13{margin-left:54.1666666667%}.devui-col__pull--13{right:54.1666666667%}.devui-col__push--13{left:54.1666666667%}.devui-col__span--13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xs--offset-13{margin-left:54.1666666667%}.devui-col__xs--pull-13{right:54.1666666667%}.devui-col__xs--push-13{left:54.1666666667%}.devui-col__xs--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__offset--14{margin-left:58.3333333333%}.devui-col__pull--14{right:58.3333333333%}.devui-col__push--14{left:58.3333333333%}.devui-col__span--14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xs--offset-14{margin-left:58.3333333333%}.devui-col__xs--pull-14{right:58.3333333333%}.devui-col__xs--push-14{left:58.3333333333%}.devui-col__xs--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__offset--15{margin-left:62.5%}.devui-col__pull--15{right:62.5%}.devui-col__push--15{left:62.5%}.devui-col__span--15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xs--offset-15{margin-left:62.5%}.devui-col__xs--pull-15{right:62.5%}.devui-col__xs--push-15{left:62.5%}.devui-col__xs--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__offset--16{margin-left:66.6666666667%}.devui-col__pull--16{right:66.6666666667%}.devui-col__push--16{left:66.6666666667%}.devui-col__span--16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xs--offset-16{margin-left:66.6666666667%}.devui-col__xs--pull-16{right:66.6666666667%}.devui-col__xs--push-16{left:66.6666666667%}.devui-col__xs--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__offset--17{margin-left:70.8333333333%}.devui-col__pull--17{right:70.8333333333%}.devui-col__push--17{left:70.8333333333%}.devui-col__span--17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xs--offset-17{margin-left:70.8333333333%}.devui-col__xs--pull-17{right:70.8333333333%}.devui-col__xs--push-17{left:70.8333333333%}.devui-col__xs--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__offset--18{margin-left:75%}.devui-col__pull--18{right:75%}.devui-col__push--18{left:75%}.devui-col__span--18{display:block;flex:0 0 75%;width:75%}.devui-col__xs--offset-18{margin-left:75%}.devui-col__xs--pull-18{right:75%}.devui-col__xs--push-18{left:75%}.devui-col__xs--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__offset--19{margin-left:79.1666666667%}.devui-col__pull--19{right:79.1666666667%}.devui-col__push--19{left:79.1666666667%}.devui-col__span--19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xs--offset-19{margin-left:79.1666666667%}.devui-col__xs--pull-19{right:79.1666666667%}.devui-col__xs--push-19{left:79.1666666667%}.devui-col__xs--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__offset--20{margin-left:83.3333333333%}.devui-col__pull--20{right:83.3333333333%}.devui-col__push--20{left:83.3333333333%}.devui-col__span--20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xs--offset-20{margin-left:83.3333333333%}.devui-col__xs--pull-20{right:83.3333333333%}.devui-col__xs--push-20{left:83.3333333333%}.devui-col__xs--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__offset--21{margin-left:87.5%}.devui-col__pull--21{right:87.5%}.devui-col__push--21{left:87.5%}.devui-col__span--21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xs--offset-21{margin-left:87.5%}.devui-col__xs--pull-21{right:87.5%}.devui-col__xs--push-21{left:87.5%}.devui-col__xs--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__offset--22{margin-left:91.6666666667%}.devui-col__pull--22{right:91.6666666667%}.devui-col__push--22{left:91.6666666667%}.devui-col__span--22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xs--offset-22{margin-left:91.6666666667%}.devui-col__xs--pull-22{right:91.6666666667%}.devui-col__xs--push-22{left:91.6666666667%}.devui-col__xs--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__offset--23{margin-left:95.8333333333%}.devui-col__pull--23{right:95.8333333333%}.devui-col__push--23{left:95.8333333333%}.devui-col__span--23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xs--offset-23{margin-left:95.8333333333%}.devui-col__xs--pull-23{right:95.8333333333%}.devui-col__xs--push-23{left:95.8333333333%}.devui-col__xs--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__offset--24{margin-left:100%}.devui-col__pull--24{right:100%}.devui-col__push--24{left:100%}.devui-col__span--24{display:block;flex:0 0 100%;width:100%}.devui-col__xs--offset-24{margin-left:100%}.devui-col__xs--pull-24{right:100%}.devui-col__xs--push-24{left:100%}.devui-col__xs--span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col__sm--span-0{display:none}.devui-col__sm--offset-1{margin-left:4.1666666667%}.devui-col__sm--pull-1{right:4.1666666667%}.devui-col__sm--push-1{left:4.1666666667%}.devui-col__sm--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__sm--offset-2{margin-left:8.3333333333%}.devui-col__sm--pull-2{right:8.3333333333%}.devui-col__sm--push-2{left:8.3333333333%}.devui-col__sm--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__sm--offset-3{margin-left:12.5%}.devui-col__sm--pull-3{right:12.5%}.devui-col__sm--push-3{left:12.5%}.devui-col__sm--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__sm--offset-4{margin-left:16.6666666667%}.devui-col__sm--pull-4{right:16.6666666667%}.devui-col__sm--push-4{left:16.6666666667%}.devui-col__sm--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__sm--offset-5{margin-left:20.8333333333%}.devui-col__sm--pull-5{right:20.8333333333%}.devui-col__sm--push-5{left:20.8333333333%}.devui-col__sm--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__sm--offset-6{margin-left:25%}.devui-col__sm--pull-6{right:25%}.devui-col__sm--push-6{left:25%}.devui-col__sm--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__sm--offset-7{margin-left:29.1666666667%}.devui-col__sm--pull-7{right:29.1666666667%}.devui-col__sm--push-7{left:29.1666666667%}.devui-col__sm--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__sm--offset-8{margin-left:33.3333333333%}.devui-col__sm--pull-8{right:33.3333333333%}.devui-col__sm--push-8{left:33.3333333333%}.devui-col__sm--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__sm--offset-9{margin-left:37.5%}.devui-col__sm--pull-9{right:37.5%}.devui-col__sm--push-9{left:37.5%}.devui-col__sm--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__sm--offset-10{margin-left:41.6666666667%}.devui-col__sm--pull-10{right:41.6666666667%}.devui-col__sm--push-10{left:41.6666666667%}.devui-col__sm--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__sm--offset-11{margin-left:45.8333333333%}.devui-col__sm--pull-11{right:45.8333333333%}.devui-col__sm--push-11{left:45.8333333333%}.devui-col__sm--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__sm--offset-12{margin-left:50%}.devui-col__sm--pull-12{right:50%}.devui-col__sm--push-12{left:50%}.devui-col__sm--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__sm--offset-13{margin-left:54.1666666667%}.devui-col__sm--pull-13{right:54.1666666667%}.devui-col__sm--push-13{left:54.1666666667%}.devui-col__sm--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__sm--offset-14{margin-left:58.3333333333%}.devui-col__sm--pull-14{right:58.3333333333%}.devui-col__sm--push-14{left:58.3333333333%}.devui-col__sm--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__sm--offset-15{margin-left:62.5%}.devui-col__sm--pull-15{right:62.5%}.devui-col__sm--push-15{left:62.5%}.devui-col__sm--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__sm--offset-16{margin-left:66.6666666667%}.devui-col__sm--pull-16{right:66.6666666667%}.devui-col__sm--push-16{left:66.6666666667%}.devui-col__sm--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__sm--offset-17{margin-left:70.8333333333%}.devui-col__sm--pull-17{right:70.8333333333%}.devui-col__sm--push-17{left:70.8333333333%}.devui-col__sm--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__sm--offset-18{margin-left:75%}.devui-col__sm--pull-18{right:75%}.devui-col__sm--push-18{left:75%}.devui-col__sm--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__sm--offset-19{margin-left:79.1666666667%}.devui-col__sm--pull-19{right:79.1666666667%}.devui-col__sm--push-19{left:79.1666666667%}.devui-col__sm--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__sm--offset-20{margin-left:83.3333333333%}.devui-col__sm--pull-20{right:83.3333333333%}.devui-col__sm--push-20{left:83.3333333333%}.devui-col__sm--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__sm--offset-21{margin-left:87.5%}.devui-col__sm--pull-21{right:87.5%}.devui-col__sm--push-21{left:87.5%}.devui-col__sm--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__sm--offset-22{margin-left:91.6666666667%}.devui-col__sm--pull-22{right:91.6666666667%}.devui-col__sm--push-22{left:91.6666666667%}.devui-col__sm--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__sm--offset-23{margin-left:95.8333333333%}.devui-col__sm--pull-23{right:95.8333333333%}.devui-col__sm--push-23{left:95.8333333333%}.devui-col__sm--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__sm--offset-24{margin-left:100%}.devui-col__sm--pull-24{right:100%}.devui-col__sm--push-24{left:100%}.devui-col__sm--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col__md--span-0{display:none}.devui-col__md--offset-1{margin-left:4.1666666667%}.devui-col__md--pull-1{right:4.1666666667%}.devui-col__md--push-1{left:4.1666666667%}.devui-col__md--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__md--offset-2{margin-left:8.3333333333%}.devui-col__md--pull-2{right:8.3333333333%}.devui-col__md--push-2{left:8.3333333333%}.devui-col__md--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__md--offset-3{margin-left:12.5%}.devui-col__md--pull-3{right:12.5%}.devui-col__md--push-3{left:12.5%}.devui-col__md--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__md--offset-4{margin-left:16.6666666667%}.devui-col__md--pull-4{right:16.6666666667%}.devui-col__md--push-4{left:16.6666666667%}.devui-col__md--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__md--offset-5{margin-left:20.8333333333%}.devui-col__md--pull-5{right:20.8333333333%}.devui-col__md--push-5{left:20.8333333333%}.devui-col__md--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__md--offset-6{margin-left:25%}.devui-col__md--pull-6{right:25%}.devui-col__md--push-6{left:25%}.devui-col__md--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__md--offset-7{margin-left:29.1666666667%}.devui-col__md--pull-7{right:29.1666666667%}.devui-col__md--push-7{left:29.1666666667%}.devui-col__md--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__md--offset-8{margin-left:33.3333333333%}.devui-col__md--pull-8{right:33.3333333333%}.devui-col__md--push-8{left:33.3333333333%}.devui-col__md--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__md--offset-9{margin-left:37.5%}.devui-col__md--pull-9{right:37.5%}.devui-col__md--push-9{left:37.5%}.devui-col__md--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__md--offset-10{margin-left:41.6666666667%}.devui-col__md--pull-10{right:41.6666666667%}.devui-col__md--push-10{left:41.6666666667%}.devui-col__md--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__md--offset-11{margin-left:45.8333333333%}.devui-col__md--pull-11{right:45.8333333333%}.devui-col__md--push-11{left:45.8333333333%}.devui-col__md--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__md--offset-12{margin-left:50%}.devui-col__md--pull-12{right:50%}.devui-col__md--push-12{left:50%}.devui-col__md--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__md--offset-13{margin-left:54.1666666667%}.devui-col__md--pull-13{right:54.1666666667%}.devui-col__md--push-13{left:54.1666666667%}.devui-col__md--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__md--offset-14{margin-left:58.3333333333%}.devui-col__md--pull-14{right:58.3333333333%}.devui-col__md--push-14{left:58.3333333333%}.devui-col__md--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__md--offset-15{margin-left:62.5%}.devui-col__md--pull-15{right:62.5%}.devui-col__md--push-15{left:62.5%}.devui-col__md--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__md--offset-16{margin-left:66.6666666667%}.devui-col__md--pull-16{right:66.6666666667%}.devui-col__md--push-16{left:66.6666666667%}.devui-col__md--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__md--offset-17{margin-left:70.8333333333%}.devui-col__md--pull-17{right:70.8333333333%}.devui-col__md--push-17{left:70.8333333333%}.devui-col__md--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__md--offset-18{margin-left:75%}.devui-col__md--pull-18{right:75%}.devui-col__md--push-18{left:75%}.devui-col__md--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__md--offset-19{margin-left:79.1666666667%}.devui-col__md--pull-19{right:79.1666666667%}.devui-col__md--push-19{left:79.1666666667%}.devui-col__md--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__md--offset-20{margin-left:83.3333333333%}.devui-col__md--pull-20{right:83.3333333333%}.devui-col__md--push-20{left:83.3333333333%}.devui-col__md--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__md--offset-21{margin-left:87.5%}.devui-col__md--pull-21{right:87.5%}.devui-col__md--push-21{left:87.5%}.devui-col__md--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__md--offset-22{margin-left:91.6666666667%}.devui-col__md--pull-22{right:91.6666666667%}.devui-col__md--push-22{left:91.6666666667%}.devui-col__md--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__md--offset-23{margin-left:95.8333333333%}.devui-col__md--pull-23{right:95.8333333333%}.devui-col__md--push-23{left:95.8333333333%}.devui-col__md--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__md--offset-24{margin-left:100%}.devui-col__md--pull-24{right:100%}.devui-col__md--push-24{left:100%}.devui-col__md--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col__lg--span-0{display:none}.devui-col__lg--offset-1{margin-left:4.1666666667%}.devui-col__lg--pull-1{right:4.1666666667%}.devui-col__lg--push-1{left:4.1666666667%}.devui-col__lg--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__lg--offset-2{margin-left:8.3333333333%}.devui-col__lg--pull-2{right:8.3333333333%}.devui-col__lg--push-2{left:8.3333333333%}.devui-col__lg--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__lg--offset-3{margin-left:12.5%}.devui-col__lg--pull-3{right:12.5%}.devui-col__lg--push-3{left:12.5%}.devui-col__lg--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__lg--offset-4{margin-left:16.6666666667%}.devui-col__lg--pull-4{right:16.6666666667%}.devui-col__lg--push-4{left:16.6666666667%}.devui-col__lg--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__lg--offset-5{margin-left:20.8333333333%}.devui-col__lg--pull-5{right:20.8333333333%}.devui-col__lg--push-5{left:20.8333333333%}.devui-col__lg--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__lg--offset-6{margin-left:25%}.devui-col__lg--pull-6{right:25%}.devui-col__lg--push-6{left:25%}.devui-col__lg--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__lg--offset-7{margin-left:29.1666666667%}.devui-col__lg--pull-7{right:29.1666666667%}.devui-col__lg--push-7{left:29.1666666667%}.devui-col__lg--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__lg--offset-8{margin-left:33.3333333333%}.devui-col__lg--pull-8{right:33.3333333333%}.devui-col__lg--push-8{left:33.3333333333%}.devui-col__lg--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__lg--offset-9{margin-left:37.5%}.devui-col__lg--pull-9{right:37.5%}.devui-col__lg--push-9{left:37.5%}.devui-col__lg--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__lg--offset-10{margin-left:41.6666666667%}.devui-col__lg--pull-10{right:41.6666666667%}.devui-col__lg--push-10{left:41.6666666667%}.devui-col__lg--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__lg--offset-11{margin-left:45.8333333333%}.devui-col__lg--pull-11{right:45.8333333333%}.devui-col__lg--push-11{left:45.8333333333%}.devui-col__lg--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__lg--offset-12{margin-left:50%}.devui-col__lg--pull-12{right:50%}.devui-col__lg--push-12{left:50%}.devui-col__lg--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__lg--offset-13{margin-left:54.1666666667%}.devui-col__lg--pull-13{right:54.1666666667%}.devui-col__lg--push-13{left:54.1666666667%}.devui-col__lg--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__lg--offset-14{margin-left:58.3333333333%}.devui-col__lg--pull-14{right:58.3333333333%}.devui-col__lg--push-14{left:58.3333333333%}.devui-col__lg--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__lg--offset-15{margin-left:62.5%}.devui-col__lg--pull-15{right:62.5%}.devui-col__lg--push-15{left:62.5%}.devui-col__lg--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__lg--offset-16{margin-left:66.6666666667%}.devui-col__lg--pull-16{right:66.6666666667%}.devui-col__lg--push-16{left:66.6666666667%}.devui-col__lg--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__lg--offset-17{margin-left:70.8333333333%}.devui-col__lg--pull-17{right:70.8333333333%}.devui-col__lg--push-17{left:70.8333333333%}.devui-col__lg--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__lg--offset-18{margin-left:75%}.devui-col__lg--pull-18{right:75%}.devui-col__lg--push-18{left:75%}.devui-col__lg--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__lg--offset-19{margin-left:79.1666666667%}.devui-col__lg--pull-19{right:79.1666666667%}.devui-col__lg--push-19{left:79.1666666667%}.devui-col__lg--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__lg--offset-20{margin-left:83.3333333333%}.devui-col__lg--pull-20{right:83.3333333333%}.devui-col__lg--push-20{left:83.3333333333%}.devui-col__lg--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__lg--offset-21{margin-left:87.5%}.devui-col__lg--pull-21{right:87.5%}.devui-col__lg--push-21{left:87.5%}.devui-col__lg--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__lg--offset-22{margin-left:91.6666666667%}.devui-col__lg--pull-22{right:91.6666666667%}.devui-col__lg--push-22{left:91.6666666667%}.devui-col__lg--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__lg--offset-23{margin-left:95.8333333333%}.devui-col__lg--pull-23{right:95.8333333333%}.devui-col__lg--push-23{left:95.8333333333%}.devui-col__lg--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__lg--offset-24{margin-left:100%}.devui-col__lg--pull-24{right:100%}.devui-col__lg--push-24{left:100%}.devui-col__lg--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col__xl--span-0{display:none}.devui-col__xl--offset-1{margin-left:4.1666666667%}.devui-col__xl--pull-1{right:4.1666666667%}.devui-col__xl--push-1{left:4.1666666667%}.devui-col__xl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xl--offset-2{margin-left:8.3333333333%}.devui-col__xl--pull-2{right:8.3333333333%}.devui-col__xl--push-2{left:8.3333333333%}.devui-col__xl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xl--offset-3{margin-left:12.5%}.devui-col__xl--pull-3{right:12.5%}.devui-col__xl--push-3{left:12.5%}.devui-col__xl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xl--offset-4{margin-left:16.6666666667%}.devui-col__xl--pull-4{right:16.6666666667%}.devui-col__xl--push-4{left:16.6666666667%}.devui-col__xl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xl--offset-5{margin-left:20.8333333333%}.devui-col__xl--pull-5{right:20.8333333333%}.devui-col__xl--push-5{left:20.8333333333%}.devui-col__xl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xl--offset-6{margin-left:25%}.devui-col__xl--pull-6{right:25%}.devui-col__xl--push-6{left:25%}.devui-col__xl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xl--offset-7{margin-left:29.1666666667%}.devui-col__xl--pull-7{right:29.1666666667%}.devui-col__xl--push-7{left:29.1666666667%}.devui-col__xl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xl--offset-8{margin-left:33.3333333333%}.devui-col__xl--pull-8{right:33.3333333333%}.devui-col__xl--push-8{left:33.3333333333%}.devui-col__xl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xl--offset-9{margin-left:37.5%}.devui-col__xl--pull-9{right:37.5%}.devui-col__xl--push-9{left:37.5%}.devui-col__xl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xl--offset-10{margin-left:41.6666666667%}.devui-col__xl--pull-10{right:41.6666666667%}.devui-col__xl--push-10{left:41.6666666667%}.devui-col__xl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xl--offset-11{margin-left:45.8333333333%}.devui-col__xl--pull-11{right:45.8333333333%}.devui-col__xl--push-11{left:45.8333333333%}.devui-col__xl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xl--offset-12{margin-left:50%}.devui-col__xl--pull-12{right:50%}.devui-col__xl--push-12{left:50%}.devui-col__xl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xl--offset-13{margin-left:54.1666666667%}.devui-col__xl--pull-13{right:54.1666666667%}.devui-col__xl--push-13{left:54.1666666667%}.devui-col__xl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xl--offset-14{margin-left:58.3333333333%}.devui-col__xl--pull-14{right:58.3333333333%}.devui-col__xl--push-14{left:58.3333333333%}.devui-col__xl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xl--offset-15{margin-left:62.5%}.devui-col__xl--pull-15{right:62.5%}.devui-col__xl--push-15{left:62.5%}.devui-col__xl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xl--offset-16{margin-left:66.6666666667%}.devui-col__xl--pull-16{right:66.6666666667%}.devui-col__xl--push-16{left:66.6666666667%}.devui-col__xl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xl--offset-17{margin-left:70.8333333333%}.devui-col__xl--pull-17{right:70.8333333333%}.devui-col__xl--push-17{left:70.8333333333%}.devui-col__xl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xl--offset-18{margin-left:75%}.devui-col__xl--pull-18{right:75%}.devui-col__xl--push-18{left:75%}.devui-col__xl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xl--offset-19{margin-left:79.1666666667%}.devui-col__xl--pull-19{right:79.1666666667%}.devui-col__xl--push-19{left:79.1666666667%}.devui-col__xl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xl--offset-20{margin-left:83.3333333333%}.devui-col__xl--pull-20{right:83.3333333333%}.devui-col__xl--push-20{left:83.3333333333%}.devui-col__xl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xl--offset-21{margin-left:87.5%}.devui-col__xl--pull-21{right:87.5%}.devui-col__xl--push-21{left:87.5%}.devui-col__xl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xl--offset-22{margin-left:91.6666666667%}.devui-col__xl--pull-22{right:91.6666666667%}.devui-col__xl--push-22{left:91.6666666667%}.devui-col__xl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xl--offset-23{margin-left:95.8333333333%}.devui-col__xl--pull-23{right:95.8333333333%}.devui-col__xl--push-23{left:95.8333333333%}.devui-col__xl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xl--offset-24{margin-left:100%}.devui-col__xl--pull-24{right:100%}.devui-col__xl--push-24{left:100%}.devui-col__xl--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col__xxl--span-0{display:none}.devui-col__xxl--offset-1{margin-left:4.1666666667%}.devui-col__xxl--pull-1{right:4.1666666667%}.devui-col__xxl--push-1{left:4.1666666667%}.devui-col__xxl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xxl--offset-2{margin-left:8.3333333333%}.devui-col__xxl--pull-2{right:8.3333333333%}.devui-col__xxl--push-2{left:8.3333333333%}.devui-col__xxl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xxl--offset-3{margin-left:12.5%}.devui-col__xxl--pull-3{right:12.5%}.devui-col__xxl--push-3{left:12.5%}.devui-col__xxl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xxl--offset-4{margin-left:16.6666666667%}.devui-col__xxl--pull-4{right:16.6666666667%}.devui-col__xxl--push-4{left:16.6666666667%}.devui-col__xxl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xxl--offset-5{margin-left:20.8333333333%}.devui-col__xxl--pull-5{right:20.8333333333%}.devui-col__xxl--push-5{left:20.8333333333%}.devui-col__xxl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xxl--offset-6{margin-left:25%}.devui-col__xxl--pull-6{right:25%}.devui-col__xxl--push-6{left:25%}.devui-col__xxl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xxl--offset-7{margin-left:29.1666666667%}.devui-col__xxl--pull-7{right:29.1666666667%}.devui-col__xxl--push-7{left:29.1666666667%}.devui-col__xxl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xxl--offset-8{margin-left:33.3333333333%}.devui-col__xxl--pull-8{right:33.3333333333%}.devui-col__xxl--push-8{left:33.3333333333%}.devui-col__xxl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xxl--offset-9{margin-left:37.5%}.devui-col__xxl--pull-9{right:37.5%}.devui-col__xxl--push-9{left:37.5%}.devui-col__xxl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xxl--offset-10{margin-left:41.6666666667%}.devui-col__xxl--pull-10{right:41.6666666667%}.devui-col__xxl--push-10{left:41.6666666667%}.devui-col__xxl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xxl--offset-11{margin-left:45.8333333333%}.devui-col__xxl--pull-11{right:45.8333333333%}.devui-col__xxl--push-11{left:45.8333333333%}.devui-col__xxl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xxl--offset-12{margin-left:50%}.devui-col__xxl--pull-12{right:50%}.devui-col__xxl--push-12{left:50%}.devui-col__xxl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xxl--offset-13{margin-left:54.1666666667%}.devui-col__xxl--pull-13{right:54.1666666667%}.devui-col__xxl--push-13{left:54.1666666667%}.devui-col__xxl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xxl--offset-14{margin-left:58.3333333333%}.devui-col__xxl--pull-14{right:58.3333333333%}.devui-col__xxl--push-14{left:58.3333333333%}.devui-col__xxl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xxl--offset-15{margin-left:62.5%}.devui-col__xxl--pull-15{right:62.5%}.devui-col__xxl--push-15{left:62.5%}.devui-col__xxl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xxl--offset-16{margin-left:66.6666666667%}.devui-col__xxl--pull-16{right:66.6666666667%}.devui-col__xxl--push-16{left:66.6666666667%}.devui-col__xxl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xxl--offset-17{margin-left:70.8333333333%}.devui-col__xxl--pull-17{right:70.8333333333%}.devui-col__xxl--push-17{left:70.8333333333%}.devui-col__xxl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xxl--offset-18{margin-left:75%}.devui-col__xxl--pull-18{right:75%}.devui-col__xxl--push-18{left:75%}.devui-col__xxl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xxl--offset-19{margin-left:79.1666666667%}.devui-col__xxl--pull-19{right:79.1666666667%}.devui-col__xxl--push-19{left:79.1666666667%}.devui-col__xxl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xxl--offset-20{margin-left:83.3333333333%}.devui-col__xxl--pull-20{right:83.3333333333%}.devui-col__xxl--push-20{left:83.3333333333%}.devui-col__xxl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xxl--offset-21{margin-left:87.5%}.devui-col__xxl--pull-21{right:87.5%}.devui-col__xxl--push-21{left:87.5%}.devui-col__xxl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xxl--offset-22{margin-left:91.6666666667%}.devui-col__xxl--pull-22{right:91.6666666667%}.devui-col__xxl--push-22{left:91.6666666667%}.devui-col__xxl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xxl--offset-23{margin-left:95.8333333333%}.devui-col__xxl--pull-23{right:95.8333333333%}.devui-col__xxl--push-23{left:95.8333333333%}.devui-col__xxl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xxl--offset-24{margin-left:100%}.devui-col__xxl--pull-24{right:100%}.devui-col__xxl--push-24{left:100%}.devui-col__xxl--span-24{display:block;flex:0 0 100%;width:100%}}

package/icon/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/icon/index.es.js

@@ -1,74 +1,218 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps } from "vue";
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
+  }
 };
-import { defineComponent, createVNode, Fragment } from "vue";
-var Icon = defineComponent({
-  name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
   },
-  setup(props) {
-    return __spreadValues({}, props);
+  color: {
+    type: String,
+    default: "inherit"
   },
-  render() {
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
     const {
       name,
-      size,
       color,
-      classPrefix
-    } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
+      size
+    } = toRefs(props);
+    const ns = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
       "style": {
-        width: size
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
       }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
       "style": {
-        fontSize: size,
-        color
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      disabled,
+      operable
+    } = toRefs(props);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
       }
-    }, null)]);
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
+    };
+  }
+});
+var iconGroup = "";
+var IconGroup = defineComponent({
+  name: "DIconGroup",
+  setup(_, ctx) {
+    const ns = useNamespace("icon-group");
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
 var index = {
   title: "Icon \u56FE\u6807",
   category: "\u901A\u7528",
-  status: "\u5DF2\u5B8C\u6210",
+  status: "100%",
   install(app) {
-    app.use(Icon);
+    app.component(Icon.name, Icon);
+    app.component(IconGroup.name, IconGroup);
   }
 };
-export { Icon, index as default };
+export { Icon, IconGroup, index as default, iconProps, svgIconProps };

package/icon/index.umd.js

@@ -1 +1 @@
-var c=Object.defineProperty;var o=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var s=(t,e,n)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,l=(t,e)=>{for(var n in e||(e={}))f.call(e,n)&&s(t,n,e[n]);if(o)for(var n of o(e))p.call(e,n)&&s(t,n,e[n]);return t};(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";var n=e.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(i){return l({},i)},render(){const{name:i,size:r,color:a,classPrefix:u}=this;return e.createVNode(e.Fragment,null,[/^((https?):)?\/\//.test(i)?e.createVNode("img",{src:i,alt:i.split("/")[i.split("/").length-1],style:{width:r}},null):e.createVNode("i",{class:`${u} ${u}-${i}`,style:{fontSize:r,color:a}},null)])}});n.install=function(i){i.component(n.name,n)};var d={title:"Icon \u56FE\u6807",category:"\u901A\u7528",status:"\u5DF2\u5B8C\u6210",install(i){i.use(n)}};t.Icon=n,t.default=d,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(i,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(i=typeof globalThis!="undefined"?globalThis:i||self,n(i.index={},i.Vue))})(this,function(i,n){"use strict";const I={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},b={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function m(s,l,o){let t=s;return l&&(t+=`__${l}`),o&&(t+=`--${o}`),t}function d(s,l=!1){const o=l?`.devui-${s}`:`devui-${s}`;return{b:()=>m(o),e:e=>e?m(o,e):"",m:e=>e?m(o,"",e):"",em:(e,a)=>e&&a?m(o,e,a):""}}var V="",h=n.defineComponent({name:"DSvgIcon",props:b,setup(s){const{name:l,color:o,size:t}=n.toRefs(s),c=d("svg-icon"),r=n.computed(()=>`#icon-${l.value}`),u=n.computed(()=>typeof t.value=="number"?`${t.value}px`:t.value),e={width:u.value,height:u.value};return()=>n.createVNode("svg",{class:c.b(),style:e},[n.createVNode("use",{"xlink:href":r.value,fill:o.value},null)])}});function D(s){return/^((http|https):)?\/\//.test(s)}function S(s,l){const{component:o,name:t,size:c,color:r,classPrefix:u,rotate:e}=n.toRefs(s),a=d("icon"),p=n.computed(()=>typeof c.value=="number"?`${c.value}px`:c.value),f=o.value?n.resolveDynamicComponent(o.value):n.resolveDynamicComponent(h),v=()=>n.createVNode("img",n.mergeProps({src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],class:[(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{width:p.value||"",transform:`rotate(${e==null?void 0:e.value}deg)`,verticalAlign:"middle"}},l.attrs),null),P=()=>n.createVNode(f,n.mergeProps({name:t.value,color:r.value,size:p.value,class:[(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{transform:`rotate(${e==null?void 0:e.value}deg)`}},l.attrs),null),$=()=>{const C=/^icon-/.test(t.value)?t.value:`${u.value}-${t.value}`;return n.createVNode("i",n.mergeProps({class:[u.value,C,(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{fontSize:p.value,color:r.value,transform:`rotate(${e==null?void 0:e.value}deg)`}},l.attrs),null)};return{iconDom:()=>o.value?P():D(t.value)?v():$()}}var g=n.defineComponent({name:"DIcon",props:I,emits:["click"],setup(s,l){const{disabled:o,operable:t}=n.toRefs(s),{iconDom:c}=S(s,l),r=d("icon"),u=n.computed(()=>({[r.e("container")]:!0,[r.m("disabled")]:o.value,[r.m("operable")]:t.value})),e=a=>{o.value||l.emit("click",a)};return()=>{var a,p,f,v;return n.createVNode("div",{class:u.value,onClick:e},[(p=(a=l.slots).prefix)==null?void 0:p.call(a),c(),(v=(f=l.slots).suffix)==null?void 0:v.call(f)])}}}),_="",y=n.defineComponent({name:"DIconGroup",setup(s,l){const o=d("icon-group");return()=>{var t,c;return n.createVNode("div",{class:o.b()},[(c=(t=l.slots).default)==null?void 0:c.call(t)])}}}),N={title:"Icon \u56FE\u6807",category:"\u901A\u7528",status:"100%",install(s){s.component(g.name,g),s.component(y.name,y)}};i.Icon=g,i.IconGroup=y,i.default=N,i.iconProps=I,i.svgIconProps=b,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/icon/style.css

@@ -0,0 +1 @@
+.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 4px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}

package/image-preview/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;