Nativescript-vue。使用SVG图形,图像,图标

时间:2019-12-16 21:08:10

标签: typescript vue.js nativescript nativescript-vue

我想知道是否可以使用svg格式的图像和图标以及如何使用它。

我正在使用带脚本的nativescript-vue 6.0。

1 个答案:

答案 0 :(得分:0)

我认为,显示矢量图形的最简单方法是图标字体。我使用插件nativescript-fonticon,并使用Fontello生成字体,该字体可让您上传自定义图标并设置unicode值。

一些提示:

  • 您必须像这样设置图标css类的格式:ifndef __WIDGET__ #define __WIDGET__ #include <iostream> class Widget { public: Widget(int i = 0) : val(i), valid(true) { std::cout << "Constructor called val " << val << std::endl; } virtual void draw(double ScaleFactor = 1) const; int getVal() const { return val; } int redraw() const {/* std::cout << "Drawing Widget(" << val << ")\n"; */ return 0; } bool isCertified() /*const*/ { return val % 2 == 0;} // whether the Widget is certified friend std::ostream &operator<<(std::ostream &, const Widget &); friend std::istream &operator>>(std::istream &, Widget &); friend bool operator!=(const Widget &, const Widget &); friend bool operator==(const Widget &, const Widget &); friend bool operator<(const Widget &, const Widget &); int test(); // perform a self-test; mark *this // Venkata added. // Copy constructor Widget(const Widget &copy) : val(copy.val), valid(copy.valid) { std::cout << "Copy constructor called " << val << "\n"; // just to prove it works } ~Widget() { std::cout << "Widget destructor is called " << val << "\n"; // just to prove it works } // Overloaded assignment Widget& operator= (const Widget &w); protected: int val; private: bool valid; }; void Widget::draw(double ScaleFactor) const { std::cout << "Drawing widget (val = " << val << ") using ScaleFactor " << ScaleFactor << "..." << std::endl; } // A simplistic implementation of operator= (see better implementation below) Widget& Widget::operator= (const Widget &w) { // do the copy val = w.val; valid = w.valid; std::cout << "operator = called "<< val << "\n"; // just to prove it works // return the existing object so we can chain this operator return *this; } inline bool operator!=(const Widget &w1, const Widget &w2) { std::cout << "Widget operator != called " << std::endl; return (w1.val != w2.val); } inline bool operator==(const Widget &w1, const Widget &w2) { std::cout << "Widget operator == called " << std::endl; return (w1.val == w2.val); } inline bool operator<(const Widget &w1, const Widget &w2) { std::cout << "Widget operator < called " << std::endl; return (w1.val < w2.val); } inline std::ostream &operator<<(std::ostream &o, const Widget &w) { return o << "Widget value is " << w.val; } inline std::istream &operator>>(std::istream &o, Widget &w) { return o >> w.val; } inline int Widget::test() // perform a self-test; mark *this { return valid = (val % 2 == 0); // only "valid" if it is even } // End Widget.h #endif 否则插件将无法识别
  • 您可能必须编辑矢量文件as explained并设置相同的高度
  • 在Android上,您的图标将随设备字体大小缩放