title: show a simple icon with openlayers and a external geojson file
body: <p>I'd like some help, I have this code below, it's working, but I would like to put de "geojsonObject" not in a variable, but in a .geojson file and load it, I'm not too familiar with javascript and geojson. </p>
  
  <pre><code>import 'ol/ol.css';
  import Feature from 'ol/Feature';
  import Map from 'ol/Map';
  import View from 'ol/View';
  import GeoJSON from 'ol/format/GeoJSON';
  import Circle from 'ol/geom/Circle';
  import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
  import {OSM, Vector as VectorSource} from 'ol/source';
  import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
  import {Icon} from 'ol/style';
  
  var image = new CircleStyle({
    radius: 5,
    fill: null,
    stroke: new Stroke({color: 'red', width: 1})
  });
  
  var styles = {
    'Point': new Style({
                 image: new Icon({
          rotation: 180 / 180 * 3.14,
                  src: 'data/test.svg'
                 })
      })
  };
  
  var geojsonObject = {
    'type': 'FeatureCollection',
    'crs': {
      'type': 'name',
      'properties': {
    'name': 'EPSG:3857'
      }
    },
    'features': [{
      'type': 'Feature',
      'rotation': 180 / 180 * 3.14,
      'geometry': {
        'type': 'Point',
        'coordinates': [0, 0]
      }
    }]
  };
  
  var styleFunction = function(feature) {
    return styles[feature.getGeometry().getType()];
  };
  
  var vectorSource = new VectorSource({
    features: (new GeoJSON()).readFeatures(geojsonObject)
  });
  
  vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
  
  var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: styleFunction
  });
  
  var map = new Map({
    layers: [
      new TileLayer({
        source: new OSM()
      }),
      vectorLayer
    ],
    target: 'map',
    view: new View({
      center: [0, 0],
      zoom: 2
    })
  });
  </code></pre>
  
  <p>I tried with the test.geojson file below, but I don't know if it's correct, and also I would like to know how to change the "vectorSource" to load it</p>
  
  <pre><code>{
    "type": "FeatureCollection",
    "crs": {
      "type": "name",
      "properties": {
        "name": "EPSG:3857"
      }
    },
    "features": [{
      "type": "Feature",
      "rotation": 90 / 180 * 3.14,
      "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
      }
    }]
  }
  </code></pre>