VueJS için SVG ikonları.
Bu talimatlar size bileşenin bir kopyasını yerel makinenizde çalışır duruma getirecektir.
v-svg-icons bileşenini npm ile kurabilirsiniz.
npm i v-svg-icons
İndirdikten sonra v-svg-icons, vue.js uygulamalarınızda kullanıma hazır olacaktır.
- v-svg-icons bileşenini main.js dosyanıza aktarın
import icons from "v-svg-icons";- v-svg-icons bileşenini istediğiniz herhangi bir adla kaydedin
Vue.component("icon", icons);Bu adımdan sonra projenizdeki tüm kayıtlı bileşenler tarafından belirlemiş olduğunuz etiket adına göre kullanılabilir hale gelecektir.
- Simgeleri kullanmak için, istediğiniz simgenin adını etiketinin içindeki "name" parametresiyle belirtmelisiniz.
<icon name="arrow-up">- Örnekteki gibi genişlik ve yükseklik değerlerini belirtebilirsiniz.
Tüm simgeler için varsayılan genişlik ve yükseklik değerleri 50 pikseldir.
<icon name="arrow-up" width="80px" height="80px" />- Simgelerin rengini değiştirmek için "color" parametresini kullanabilirsiniz.
<icon name="arrow-up" color="black" />
<icon name="arrow-up" color="#000" />
<icon name="arrow-up" color="rgba(0, 0, 0, .2)" />- Ekstra stillendirme işlemleri için sınıf adı olarak simgenin adını kullanabilirsiniz.
<icon name="arrow-up" /><style>
.arrow-up{
fill: green;
background: red;
width: 150px;
height: 150px;
}
</style>Svg için uygulanabilecek tüm stillendirme işlemlerini örnekteki gibi uygulayabilirsiniz.
Sürüm oluşturma için GitHub kullanıyoruz.
MIT lisansı altında lisanslıdır, ayrıntılar için LICENSE bölümüne bakın.